滋賀に本社を構える「株式会社いろあわせ」様のサイトを制作させていただきました。
①Webフォント
お客様に「サイトで何かしたいことがあったら挑戦していいよ!」という言葉をいただいたので、お言葉に甘えてFONTPLUSのWebフォントを導入させていただきました。
FONTPLUSはランニングコストがかかるので、クライアントにはなかなか提案しづらかったので、非常にありがたかったです。Webフォントのおかげで、どのデバイスで見てもきれいなフォントが表示されます。今回のようにコピーを生かすデザインではWebフォントが生きますね。
②色の切り替え
トップの背景色は黄色→青→ピンクでゆっくり切り替わります。3つのあり方のページにもあるように「多様ないろをうけいれ、あわせること。」というメッセージをこめて。
実はトップだけでなく、下層ページも薄い色で切り替わっています。だいぶかすかな変化なのでよく見ないと気付かないぐらいですが、心地よい変化を味わっていただきたいです。そしてこれも微妙な変化なのですが、メッセージページの北川さんの名前のところも黒→オレンジに変化するようにしています。北川さんが自分の色をオレンジだとおっしゃっていたので、北川さんの「いろ」が見えたらおもしろいと思い、変わるようにしています。
③タイピングアニメーション
トップのコピーと下層ページのタイトルはタイピンクのアニメーションを導入しました。トップは背景色と文字だけ、というシンプルなデザインだったので、コピーを印象的に見せる方法はないかと考え、これを思いつきました。(スクリプトの提供者様に感謝!)シンプルなデザインにちょっとした演出を加えるとグッと引き立ちますね。
今回はいろあわせの「いろ」がどうやったら出せるかあれこれ試行錯誤しました。いろあわせに興味を持ったら、ぜひ「いろあつまれ」に登録してみてください!絶対に損はしないと思います!
【URL】http://www.iroawase.co.jp/
【担当】デザイン/コーディング(レスポンシブWeb)