ご覧いただきありがとうございます！
フォトグラファー兼WEBデザイナーのよしみです。
かっこいいWEBサイトを制作したいと思っても「そもそもどのようなWEBサイトがイケてるデザインなのかわからない」という方も多いのではないでしょうか。
今後WEBデザイナーとして活躍していくためにも、どのようなWEBサイトがイケてるデザインなのかアンテナを張って、感度を高めていくことが大切です。
今回は、イケてるデザインの特徴を解説するとともに、かっこいいWEBサイトをいくつかピックアップして紹介していきたいと思いますので、ぜひ参考にしてみてください。
目次
センスの良いWEBサイトとは？イケてるデザインの特徴
一口にイケてるWEBサイトといっても、ジャンルやパターンはさまざまです。
ですが、センスの良い、イケてるデザインには必ず共通している点がいくつか存在します。
ここではイケてるデザインの特徴を5つに分けて、一つ一つ具体的に解説していきます。
・シンプルで見やすいサイト設計
・雰囲気に適した写真やイラスト素材
・読みやすいフォント選び
・イメージに合った配色
・時代の流れを意識したデザイン
シンプルで見やすいサイト設計
WEBサイトは、自分たちのサービスやコンテンツをわかりやすい形でまとめて、可視化することを目的として作られています。
「かっこいい」ビジュアルのデザインももちろん大切ですが、素材などを盛り込みすぎてページ内がごちゃごちゃしてしまっては、ユーザビリティーにも悪影響が出てしまい、かえって逆効果です。
そのため、サイト設計はヘッダー部分、コンテンツ部分、フッター部分を中心にメリハリをつけて、コンテンツ全体は余白をたっぷり取り、ゆとりあるレイアウトを意識するようにしましょう。
全体的に余白をゆったり取ることで、サイト設計がシンプルになります。余白が多く、情報が整理されたサイトは見た人にも負担が少なく、アクセスしやすいページになるでしょう。
雰囲気に適した写真やイラスト素材
イケてるWEBサイトには、そのサービスやコンテンツに適した写真・素材選定が必須です。
写真やイラスト素材は、サービスのブランディング力を上げる効果があり、選定した素材によってサービスの印象やイメージが大きく変わってきます。
例えば保育園のサイト制作だったら、
・柔らかいタッチのイラスト
・優しい色合いの子どもの写真
・温かみを感じるような素材
を使うことで、よりコンテンツのイメージが伝わりやすくなります。
反対にコンサルティング会社のようなかっちりとしたビジネスサービスを展開しているサイトでは、
・落ち着いた色合いの素材
・ビジネスを連想させるような建物や人物の写真
を盛り込むことで、よりサービス内容が伝わりやすくなってきます。
良質な写真・イラスト素材を選定するとともに、サービスや会社のブランドイメージに適した素材を盛り込むと、WEBサイト全体のトーンが整うでしょう。
読みやすいフォント選び
WEBサイトをかっこよく、イケてるデザインにするためにも、フォント選びはとても大切です。
例えば、アパレルなどの華やかな業界のコンテンツを作るとなった場合、パソコンなどにデフォルトで入っているフォントをそのまま使用したら、なんだか味気ない印象になってしまいます。
ブランドイメージに合うようなフォントを選びましょう。
例えば、
・シンプルで洗練された大人のアパレルブランドなら、細めの明朝体
・原宿にあるような、ポップでカラフルな女性向けのアパレルブランドなら太めの丸ゴシック
など、適したフォントを使用することでコンテンツにまとまりが出るので、読みやすくイケてるWEBサイトになっていきます。
イメージに合った配色
WEBサイト制作で大きくイメージを左右するのが、配色です。
コンテンツなどのサイト内には、主に3つのカラーで全体が構成されています。
「ベースカラー」が7割、次に多いのが「メインカラー」で2〜3割程度、最も少ないのが「アクセントカラー」で1割程度の割合で使われています。
ベースカラーはサイト全体のトーンを決めるための重要な色で、主に背景や余白などに使われます。
メインカラーはサイトのイメージを印象付けるための主役の色で、アクセントカラーは割合こそ少ないですが、サイト全体を引き締める効果を持つとても重要な色です。
元気で明るい印象にしたいならイエロー、ビジネスで落ち着いた印象にしたいならブルーを選ぶなど、見た人にどのような印象を与えたいかで配色が変わってくるので、ブランドイメージに合わせて色味を選択していくと良いでしょう。
時代の流れを意識したデザイン
ファッションやスイーツなど、ライフスタイルにも時代の流行があるように、WEBサイトにも時代の流れがあります。
例えば、1990年はホームページ制作ソフトが世に広まった時期でもあり、企業のみならず、趣味でホームページを持つ人が徐々に増えてきた年代です。
「テーブルレイアウト」といって、tableタグを使用した格子状のレイアウトのサイトが多く存在し、初心者でも扱いやすいレイアウトでした。
下記の俳優の阿部寛さんのサイトは、ファンの方が趣味で作られたテーブルレイアウトのデザインの一例です。
【参考】俳優の阿部寛さんオフィシャルサイト
http://abehiroshi.la.coocan.jp/
時代が移り変わるとともに、デザインの流行も変化していきます。
近年は、世の中が多様化していることもあり、デザインの幅もどんどん広がっています。
・シンプルな設計のミニマリズム
・懐かしさを取り入れたレトロモダン
・素材やパーツを重ねて非対称にデザインするブロークングリッドレイアウト
・動画コンテンツをメインに配置したもの
など、さまざまなデザインパターンが増えています。
時代の流れに沿ったデザインを取り入れ、イケてるかっこいいWEBサイトを是非デザインしていきましょう。
イケてる！かっこいいWEBサイトデザイン5選
イケてるWEBサイトの特徴がわかったところで、実際にどのようなデザインがかっこいいのか、目で見てセンスを磨いていくことも大切です。
日々いろいろなWEBサイトを目にするWEBデザイナーである私が独断と偏見でチョイスした、動きやレイアウトの組み方がイケてるWEBサイトを5つご紹介していきます！
MEMORI
MEMORIは、写真教室を開催したり、アートスペースを開放したり、写真やアート全般をサービスとして事業展開をしています。
写真を主軸としたアートを意識させるような、余白をゆったりと取ったレイアウトで組まれているのが特徴的です。ベースカラーやメインカラーもシンプルで、アクセスした人が見やすく、シンプルにサイト設計されています。
ファーストビューをいくつかのパターンの写真をスライドすることで、シンプルながらも動きを出してメリハリをつけている点もポイントです。
鯛のないたい焼き屋 OYOGE
東京都港区にある、たい焼き専門店のサイトです。
ベースカラーやメインカラーにオレンジ色を配色することで、ポップで元気な印象を与えています。
ファーストビューに動きのあるイラストレーションを持ってくることで、より楽しげなイメージにしている点も特徴的です。
イラストだけでなく、たい焼きを作る工程の写真や商品写真を載せることで、専門店としてブランディングされたコンテンツになっています。
写真を重ねたり、文字を写真を交互に配置するなど、レイアウトに変化をつけることで遊び心を出しているところもポイントです。
医療法人社団神明会 佐藤歯科医院
岐阜県にある、歯科医院のサイトです。
サイト内に淡めのブルーを使うことで、病院らしいクリーンなイメージや爽やかさを印象づけています。
実際の院内の写真を使ったり、イメージ素材を使ったり、サイトの雰囲気に適した素材を使用することでよりリアルに、その病院の雰囲気がイメージできるようにデザインされています。
ヘッダーやフッターもシンプルですが、サイトデザインに適した柔らかい印象のゴシックを使用しており、温かみが感じられます。
7NaNatural
日本初の、天然成分100%のカラーコスメを販売するブランディングサイトです。
ローディング画面には七色の色合いのアニメーションが表示されており、ブランドコンセプトが伝わりやすいように設計されています。ファーストビューの写真は商品イメージに合わせて撮り下ろされたもので、コンテンツ内のブランディングが確率されている点が特徴的です。
サイト設計がシンプルながらも写真素材をカラフルにすることで、ユーザーにワクワク感を感じさせるような作りになっています。
特に人の健康を意識したオーガニックがブームとなっている昨今、多様的でありながらミニマリズムを感じさせるデザインです。
株式会社イザナ
建築・施工事業をメインとしてサービス展開している会社のコーポレートサイトです。
ファーストビューに建設工事の現場感が伝わる動画を流すことで、企業イメージがより伝わりやすくなるように設計されています太めのゴシックや太めの明朝体を使うことで、「建設」から連想させる力強さを出しつつ、しなやかな印象が感じられるのが’特徴的です。
ベースカラーを墨色のような高級感が感じられる色を使うことで、プロフェッショナル雰囲気を印象づけています。
最後に：いろいろなサイトを見て目を鍛えよう！
いかがでしたか？
イケてるWEBサイトは、そのサービスやコンテンツブランドの雰囲気に合ったトーンで、全体をまとめているところがポイントです。写真やイラスト、フォントや配色など、一つとっても、どのようなブランドイメージをを打ち出すかによって、イメージが大きく変わってきます。
まずはたくさんいろいろなサイトを見て、目を鍛えていくところから始めましょう！
今回解説したデザインの特徴やデザイン例を参考にして、ぜひサイト制作にお役立ていただけると嬉しいです。
最後まで読んでいただき、ありがとうございました！
