今や当たり前のものとなったWebサイトですが、魅力的なサイトを作成するためには、Webデザインに関しても気を使う必要があります。
このWebデザインの効力をわずか4分間で学習できるサイト「Web Design in 4 minutes」が話題を集めています。
同サイトは一見何のかざりもない、実用一点張りのWebサイトのように見えますが、画面の下に表示されているリンクをクリックすることで画面が切り替わっていく仕組みが埋め込まれています。まず「first thing」をクリックすると…。
コンテンツが大事
デザインはコンテンツを助けるもので、コンテンツがもっとも大事なものだという至極もっともな主張が記述されています。
センタリングも大事
次の主張はセンタリングが大切というものです。長すぎるラインは読みづらいので、一行の長さをbodyにmax-widthを設定することで制限し、センタリング表示することで読みやすさが向上するのです。
このときWebブラウザ内のサイトの表示が、実際にセンタリングされたことにも注目です。Webデザインにおける大切なポイントを説明するごとに、ブラウザ内のサイトの見た目が改善されていくのが興味深いポイントです。
スペース、カラー、バランス
要素の適切な配置のためのスペーシングも大切。
色やコントラストの設定も重要なポイント。完全な白地に黒文字は目に厳しい色使いとされています。もう少しソフトな色合いに設定する方法が説明されています。
微妙なバランス調節の大切さなどが説明されています。ここではpreやcodeといった要素にpaddingや背景色が設定されているようです。
プライマリーカラー、セカンダリカラー、カスタムフォント
視覚的なアクセントとなるプライマリーカラーを設定します。
補助的な意味を持つセカンダリーカラーも設定。
他と違った意味を持たせるためにカスタムフォントを使用することもできます。
画像を追加して完成
背景画像などを追加して仕上げを行えば完成。
Webサイトのトップに戻ってみると、最初はあれほど味気なかった「Web Design in 4 minutes」のサイトが、今風のクールなデザインに更新されていることがわかります。
以下ポイントをまとめてみます
- コンテンツ
- センタリング
- スペース
- カラーとコントラスト
- バランス
- プライマリーカラー
- セカンダリーカラー
- カスタムフォント
- 画像やアイコン
これらのルールを覚えておけば優れたWebデザインを実装できそうです。
まとめ
「Web Design in 4 minutes」を作成したのは、フロントエンドデザイナーのJeremy Thomas氏。説明されている内容とともに、クリックするごとにWebサイトの見た目が切り替わっていくアイデアがHacker Newsでも絶賛されています。
デザインに悩んでいるWeb開発者・デザイナーの方は参考にしてみてはいかがでしょうか。