知ってる？
ショピマって
ホームページ制作会社のニュース・ブログ
ホームページ制作に役立つことから、スタッフの素顔まで。
2021.02.26
「ホームページをあのサイトみたいにかっこよくしたい」「今っぽいサイトのデザインってどんな感じだろう」とお悩みの方は多くいらっしゃいます。
自分で作る方も、制作会社に依頼する場合も、自分の思う「かっこいい」を明確に表現できたほうが、より満足のいくWebサイトを制作することが可能です。
自分のイメージする「かっこいい」を具体的にして、理想のホームページを作るためにぜひこの記事を最後までご覧ください。
目次
かっこいいホームページを作成するためには、下記の5つを意識してつくることが重要です。
以上の5つについて、詳しく解説していきます。
ホームページを見る際に、色は最初に入ってくる視覚的な情報になります。
そのため使用する色の選び方はとても重要です。
使う色によってサイト全体から与えられる印象が変わるため、どんな色を使うとよいか、まずはメインとなる1色を決めましょう。
下記は、各色が与えるイメージです。
メインとなる色（テーマカラー）はサイト内で下記のコンテンツに使われます。
テーマカラー決まったら、次はアクセントカラーを決めます。
アクセントカラーはメインとなる色と同系色から選び、2〜3色ほどに留めましょう。
使用する色が増えると、ホームページのテーマがぶれてしまい、まとまりがない印象になります。
またテキストの色には基本黒を使用するため、サイトの背景色には白を使用するのが一般的です。
文字に使用する黒色も、真っ黒（#000000）ではなく、少しグレーに寄せることで、背景とのコントラストが少なくなるため、目の疲れを軽減することができます。
色を留意することで、統一感のある見やすいサイトを制作しましょう。
かっこいいと思うサイトを制作するには、ユーザーが見やすいレイアウトにしましょう。
情報がうまく入ってこないWebサイトでは、煩雑でまとまりがない印象を与えかねません。
近年、スマートフォンでのサイト閲覧が一般的になっているため、スマートフォンの縦長な表示にあわせ、パソコンでも同じように1カラムのレイアウトが求められます。
2カラム以上のマルチカラムレイアウトでは、デバイスが変わるとレイアウトも大幅に変わってしまうため、統一感がなくなってしまいます。
シングルカラムレイアウトとは、コンテンツのレイアウトが1カラム（1行）のものを指します。
画像や見出しなど、コンテンツひとつひとつを大きく配置するため、インパクトのあるページを作ることが可能です。
1カラムではディスプレイいっぱいにコンテンツが表示されるため、画面に映っている情報も制限されます。
そのため、ホームページを閲覧している人のコンテンツに対する集中力が高まり、注目してほしい内容への誘導が容易です。
しかし、シングルカラムレイアウトを適用した場合、1ページに多くの情報を掲載してしまうとかなり縦に長いページになるため、情報量が多いサイトにはあまりおすすめできません。
どんなサイトにするのか、内容に合わせてレイアウトを考えましょう。
まず最初にディスプレイに表示されるのはメインビジュアルです。
シングルカラムレイアウトで制作した場合、ファーストビューで見える唯一の情報となるため、サイト全体のイメージを決める重要な役割を持ちます。
このメインビジュアルの画像が適切でないと、何のサイトかわからなかったり、あまり作り込んでいないページという印象を与えてしまいます。
下記のポイントを押さえて、メインビジュアルを設定しましょう。
コーポレートサイトなどであれば、デザイン性の高いロゴを配置するのもいいかもしれません。
メインビジュアル以外にもトップページには画像を多く使用すると効果的です。
テキストだけではユーザーが冗長に感じてしまい、離脱する可能性が高くなります。
サイトに訪れた人に、そのページの意図がきちんと伝わるように制作することが大切です。
ホームページを制作するにあたって、余白や行間の取り方は重要になってきます。
行間を詰めすぎると視認性が下がり、情報の取り逃しなどに繋がるかもしれません。
余白を大きく取ることでサイト全体が見やすくなります。
また、画像やテキストなど、コンテンツの間に大きく余白を取ることで、違うブロックであることをユーザーに認識してもらいやすくなるでしょう。
使用するフォントによっても、ホームページに対する印象が大きく変わります。
ゴシック体は見やすくポップなイメージ、明朝体では洗練されたイメージや、高級感を演出することが可能です。
また、色と同様にたくさんの種類のフォントを使用すると、全体の統一感がなくなってしまいます。同じフォントを使用するようにしましょう。
しかし、テキストに使用するフォントは「デバイスフォント」と言って、閲覧するデバイスが変わることで見え方が変化します。
一方、デザイン性の高いロゴや、見出しなどのフォントは画像として書き出して「画像フォント」として処理することで、デザインが見栄えが変わることを防ぎます。
デバイスフォントと画像フォントにはそれぞれメリット・デメリットがあるため、使用する場面を考えて反映することが大事です。
デバイスフォント
画像フォント
自分のイメージに近づけるために、参考となるホームページがあるとより具体化しやすくなります。
上記に挙げた5つのポイント「色」「レイアウト」「余白」「メインビジュアル」「フォント」に注目して「こんなホームページにしたい」という、自分のセンスに合ったものを見つけましょう。
参考にするサイトは複数あると良いです。
ピックアップしたホームページの共通点が見えてくると、制作するサイトのデザインがより具体的にイメージできます。
ここからは、参考にしたいかっこいいサイトを探すための、おすすめギャラリーサイトを4点紹介しましょう。
クオリティの高い、縦に長いサイトを集めているギャラリーサイトになります。
業種、デザインの種類などにカテゴリが分けられており、ホームページのデザインをイメージごとに検索しやすいのがポイントです。
こちらも、国内の品質の高いWebサイトが揃っているギャラリーサイトです。
更新頻度が高く、トレンドのホームページをチェックするのに最適ですよ。
検索カテゴリも細かく設定されており、よりイメージに近いものが検索しやすくなっています。
黒い背景が印象的な「bookma!」は、パソコンとスマートフォン両方のデザインを一覧できるのが特徴になります。
レスポンシブなデザインを意識してホームページを制作する場合には、こちらのサイトが便利です。
WordPressで制作したページを多く掲載しているのがこのギャラリーサイトです。
個人ブログやポートフォリオサイトなど、WordPressで制作しようとしている人にはこちらのサイトを参照するのをおすすめします。
使用しているテーマも分かるので、購入するテーマを検討するのにもいいですよ。
参考となるサイトを見つけたら、それを元に実際にホームページを制作するフェーズに移ります。
制作する場合に便利なツールもたくさんあるので、知っていると便利です。
もし制作会社に依頼する場合にも、下記のようなツールを利用すれば、自分の作りたいホームページのデザインをより正確に伝えるのに役立ちます。
画像の情報収集に特化したサイトです。
SNSと参考サイトのギャラリーサイトの中間のようなPinterestは、サイトだけではなく、写真やイラスト、他のSNSの投稿などを参照することができます。
イメージとなる単語、例えば「かっこいい」「シンプル」などと入力すると、それに適した画像を検索することが可能です。
会員登録が必要ですが、無料のため気軽に利用できます。
GoogleやSNSのアカウントがあれば登録も簡単です。
https://material.io/resources/color/
ホームページの配色を決めるのに役立つツールです。
「この色にしたい！」と思っても、実際その色を使ったらどうなるのかイメージがしづらいときも、Webサイトのような見た目で配色を表示してくれます。
右側の配色パレットから「メインカラー」「アクセントカラー」「テキストのメインカラーとサブカラー」を選んで、直感的にホームページのカラーイメージをチェックすることができます。
またテキストとのコントラストを判定してアクセシビリティ（読みやすさ）を検証する機能もあり、制作会社へ色のイメージやトンマナ（サイトデザインの一貫性を保つための配色ルール）を伝える場合にも役立ちます。
かっこいい画像でスタイリッシュな雰囲気や、独特の世界観を表現したい場合は、海外のフリー画像サイトを使用するのもおすすめです。
日本のフリー画像サイトの写真は使用しているホームページやブログが多いので、海外のフリー画像を使えば、他のページとの差別化ができます。
代表的なサイトを3点挙げておきます。
様々なバリエーションの写真が入手できるギャラリーサイトです。
掲載されている画像数が多いので、ホームページのテイストに合うものがきっと見つかりますよ。
雰囲気のある、アート性の高い画像が多いサイトです。
更新頻度も高く、豊富に風景画像を取り揃えています。
個性的な画像が多いサイトです。
ユニークで面白い写真が多いため、インパクトの強い画像素材を求めているならこのサイトがおすすめですよ。
以上、かっこいいホームページを制作するポイントや、便利なツールを紹介いたしました。
自分でサイトを制作する場合にも、制作会社に依頼する際にも使えますので、ぜひ参考にしてください。
