効果的なデザイン選定とインスピレーション
こんにちは！デザイナーのしんたにです。
毎月、気になったり、参考にしたい「美しい、上質なWebサイト」をまとめたいと思います。
優れたデザインのサイトを参考にして、インスピレーションを得ることで、効果的なデザインを選定しWebデザイン制作に役立ててみてください。
今後ますます、モバイルファーストが重要となる中で、ビジュアルのデザインが良くても表示速度が遅いものは対象から外しました。
海外Webサイトデザイン
1. Humen
シンプルなメニューとイメージを大胆に使った、ビジュアルのインパクトとレイアウトが魅力的なサイトデザインです。才能あるプロダクトデザイン、ブランディング、アートディレクション、イラストレーション、セットデザイン、写真撮影、ビデオ撮影、コピーライティングを多言語で行い、人間の感情をデザインするクリエーター集団。サイトでそれを見事に表現しています。
2. NU SWIM
ミニマルなデザインの中で商品のビジュアルの見せ方にこだわっています。日本によくあるショッピングサイトとは大きく異なり、ブランドイメージと販売部分を両立させたデザイン力がすばらしいです。ニューヨークを拠点に、フィット感、構造、素材、シンプルさを重視したスイムウェアとライフスタイルを提案するブランド・ショップサイトです。
3. I&CO
色数を最小限に抑え、2カラムで要点が見易くてしっかりとシンプルに伝わるレイアウト構成が秀逸です。モバイル時にメーニューがボトムに来るあたりもユーザーフレンドリーな印象です。“広告界のイチロー”と呼ばれているレイ・イナモトさん率いる、クリエイティブ×ビジネスの未来をいち早く体現するビジネスインベンションファーム「I&CO」のサイトです。
4. Locomotive — Montreal Web Agency
サイトを訪れるとわかりますが、いろんなアニメーション技術が使われています。ラインがバウンドする仕様や、マウスオーバーでの効果はあまり他のサイトではみたことのない効果が当てられています。驚いたのは、command+cでテキストをコピーしようとすると、画面に「C」と大きく描かれます。遊び心ありますね。この手のサイトはやたらと表示速度重くなりがちですが、そこまで重くなくストレスの少ない秀逸なサイトです。
5. Christopher Doyle & Co.
これぞシンプルでミニマルなサイトの代表格ではないでしょうか。メニューを選択すると、その詳細テキスト本文が表示されます。ほぼテキストのみで構成されていますが、暇にならないレイアウト構成と、コンテンツの見せ方が面白いです。プロジェクト紹介のgifの見せ方も良いですが、その部分だけ少し重く、他のページが軽い分余計に重く感じてしまいました。
→ https://christopherdoyle.co/
日本国内Webサイトデザイン
6. 下北線路街
コンテンツやメニューなど、大きくレイアウトされており、全体的にポップで情報が多くなりがちなところですが、要点にちゃんとフォーカスされていて綺麗に整理されています。再開発が進む下北沢の線路街というテーマを楽しげに、わかりやすく感がられるサイトデザインです。
7. 宇多田ヒカル 配信シングル『Time』歌詞サイト
宇多田ヒカルさんの『Time』の歌詞にフォーカスしたキャンペーンサイトです。スクロールすることで歌詞が現れ、歌詞をクリックすることで、その部分をツイートできる仕掛けが施されています。また、いろんな方がツイートされた投稿が可視化されて、繋がりが生まれる仕組みになっています。面白いアイデアですね。サイトもとてもシンプルで美しいです。
→ https://www.utadahikaru.jp/time/
8. group_inou / MAP
こちらのサイト実はもう5年も前に作られたサイトなのですが、とてもキャッチのアニメーションが素晴らしく、全体のデザインもアートワークとサイトと両立させてあるデザインが素晴らしいなと思います。当時、グループイノウさんのMVと文化庁メディア芸術祭でも紹介されていました。「つかみ」の大切さを感じます。
→ http://g-a-l.jp/group_inou/map/
まとめ
いかがだったでしょうか?
今回は海外サイトが少し多めでしたが、セオリーに囚われないデザインは海外の方が多い気がします。国内外問わず、トレンドは非常に気になりますし、参考になりますね。
以上、しんたにでした！
またPart2でお勧めサイトを紹介したいと思います！
弊社では「シンプルで美しいサイト」制作を10万円から承ります
お客様の目的にあったプランでわかりやすくご提案いたします。一番人気のライトプランパッケージで自分だけのWebサイトを持ちませんか？
Contact
Webサイトデザインを承ります！お気軽にお問い合わせください。