ホームページデザインを決める際に「かっこいいホームページを作りたい!」と思っても、実際にかっこいい印象を与えるホームページとは、いったいどのようなものかわからず検索された方もいらっしゃるでしょう。

本記事では、複数のホームページが集まったギャラリーサイトを紹介しています。ギャラリーサイトでは「かっこいい」「ポップ」「シンプル」といった様々なカテゴリーを選択することができ、参考になるホームページが数多く掲載されています。

そのため、抽象的なイメージではなく一般的な「かっこいい」の基準を知ることができ、流行に乗ったホームページデザインを参考にすることができます。

また、かっこいいホームページの特徴やホームページデザインにおけるポイントについても書いているので、現状でホームページデザインが決まっていない方や参考になるホームページが知りたい方は是非最後までご覧ください。

初期費用0円、月額9,000円〜
プロが作るホームページ作成サービス

siteflowはプロが作って自分で更新できるホームページ作成サービスです!

お客様の状況を専任担当が丁寧にお聞きして、最適な構成とデザインをご提案。
最短4週間でオリジナルのホームページをプロが作成します。更新作業は直感的で操作しやすい管理画面からご自身でいつでもカンタンに。

  • 初めてのホームページ作成で不安
  • どんなホームページにすれば良いかわからない
  • 公開後もしっかりサポートして欲しい

このようなお悩みをお持ちの方はプロにお任せできるホームページ作成サービスのsiteflowにお任せください!まずは無料相談から。

目次

ギャラリーサイトを比較する基準

これから様々なギャラリーサイトを紹介しますが、以下の点に注目してギャラリーサイトを比較することで自分の目的に合ったサイトを表示しやすくなります。

同業種のホームページが掲載されているか

これから制作しようと思っているホームページと似ているサイトがあると大いに参考になります。また、カテゴリーの検索しやすさもギャラリーサイトごとに異なるので比較してみましょう。

掲載数が多いか

掲載数が多いということは参考にできるサイトが多いということです。同業種のホームページを参考にするだけでなく、他の業種の良いところをピックアップして自社サイトに取り入れることで、競合他社との差別化も図れます。

頻度が高いギャラリーサイトか

更新度が高いギャラリーサイトだと流行を取り入れやすくなります。ホームページのデザインは日々進歩しており、掲載数が多くても更新頻度が低いサイトを参考にしてしまうと流行に遅れた仕上がりになってしまいます。

更新頻度に注目しながら自分にあったギャラリーサイトを見つけることをおすすめします。

かっこいいホームページのギャラリーサイト8選

ホームページ作成において、初めに決めておきたいのがデザインです。優れたデザインでユーザーの目を引き付けるホームページは、いわば先人の知恵の結晶ともいえます。

ここでは、参考になる6つのギャラリーサイトを紹介します。どのようなホームページにしたいのか、具体的な例を見て学んでみましょう。

1. SANKOU!

引用元:SANKOU!ホームページ(https://sankoudesign.com/category/cool/

デザインの色合いや配色で検索できるほか、掲載されている内容、画像・動画の有無なども選択でき、理想のデザインを見つけるのに役立つサイトです。

「シンプル」「カジュアル」「スタイリッシュ」など、ホームページの雰囲気を示すワードで絞ることもできます。ランディングページ・ECサイト・コンテンツページなどにおいても、最新のトレンドがわかるサイトです。

2. MUUUUU.ORG

引用元:MUUUUU.ORGホームページ(https://muuuuu.org/category/taglist/stylish

縦に長いサイトが集められたギャラリーです。カテゴリーは、業種・デザイン・カラーのほか、Webマガジンやポートフォリオといったタイプ別でも分類されています。

イメージにマッチするデザインが見つけやすく、特にスマートフォン用サイトのクオリティ向上を目指している方におすすめです。

3. straightline bookmark

引用元:straightline bookmarkホームページ(http://bm.straightline.jp/

タグリストのタブをクリックすると、テーマカラーやカテゴリーのほか、レイアウトでの検索もできるようになっています。会員登録をすれば、「いいね」やブックマーク機能を使うことができ、じっくりとお気に入りのデザインを比較することも可能です。

4. WebDesignClip

引用元:WebDesignClip ホームページ (https://webdesignclip.com/tag/cool-design/

デザイン性の高い国内外のWebサイトを集めたギャラリーです。メニューを開くと、カラーやレイアウトでの検索以外にWordPressやレスポンシブのタグが用意されていて、目的に合わせたデザインをまとめて参考にすることができます。

5. I/O 3000

引用元:I/O 3000 ホームページ (https://io3000.com/tag/cool/

こちらも国内外のホームページを紹介しているサイトです。ギャラリーは毎月更新されるため、常に新しいデザインに触れることができます。業種や雰囲気、カラーで分類される以外に、1年ごとのアーカイブも作成されていて、年を遡ってトレンドの移り変わりを見ることができます。

6. CSS Design Awards

引用元:CSS Design Awards ホームページ (https://www.cssdesignawards.com/

海外のホームページをまとめたギャラリーサイトです。直観的なキーワードで検索できるため、イメージに合うサイトをすぐに見つけ出せます。

UIデザイン・UXデザイン・イノベーションの3つの項目でスコアが公開されていて、品質の高い独創的なデザインを参考にすることができます。

7. 81-web.com

引用元:81-web.com ホームページ (https://81-web.com/

81-web.comは日本国内の優れたサイトのみを集めたギャラリーサイトで掲載数は約3,500個となっており、日々追加されています。サムネイルの段階で「パソコン(pc)」「スマートフォン(sp)」それぞれの画面イメージを確認することができます。

無限スクロールになっているのですが、重くならずスムーズにスクロールすることができるのでストレスを感じずに検索することができます。

また、タグも複数選択して検索することができるためイメージに近いサイトを絞り込んで選ぶことができるのも便利なポイントです。さらに、サムネイル右下の「+」を押すだけでお気に入り(Fav)に登録されるため、後で比較しやすくなっています。

8. URAGAWA

引用元:URAGAWAホームページ(https://uragawa.work/

URAGAWAはクリエイティブカンパニーの情報を蓄積していき、クリエイティブカンパニーと、クリエイター・クライアントの関係を構築することを目的としています。URAGAWAにあるホームページはどこの制作会社で創られたのかがわかるようになっています。そのため、ホームページ制作会社に依頼してサイトを作ろうと思っている人にはおすすめのギャラリーサイトです。また、特集ページではホームページ制作のウラガワを見ることができます。どのような過程で設計されているのかがわかるのも魅力です。

かっこいいデザインの企業ホームページ15選

かっこいいホームページとひと言にいっても、その表現は多岐にわたります。ここからは、企業が公開するデザイン性の高いホームページを紹介します。

1. 株式会社ユニクロ

引用元:株式会社ユニクロホームページ(https://www.uniqlo.com/jp/ja/contents/lifewear-magazine/

トップページからユーザーの目を引く洗練されたデザインが印象的です。インタビューやコラボレーション商品について詳しく紹介する記事や、不定期で更新されるマガジンの公開など、訪れた人の好奇心をくすぐる工夫がされています。オンラインショップでは、購入者の評価が星で表示されていて、人気の高い商品がひと目でわかるようになっています。

2. 株式会社デンソー

引用元:株式会社デンソー ホームページhttps://www.denso.com/jp/ja/

トップページだけでなく、スクロールした先の画像と印象的なキャッチコピーの数々が見る者の心をとらえます。企業が現在行っている取り組みや未来に描くビジョン、テクノロジーを駆使した製品・サービスの紹介などが見やすく整理されています。シンプルなレイアウトの中で使われているアニメーションが効果的です。

3. sansan株式会社 DSOC

引用元:sansan株式会社 DSOC ホームページhttps://sansan-dsoc.com/about/

名刺のデータ化を行っている企業のホームページです。モノトーンを基調にテキストのみが表示されるシンプルなデザインは、アニメーション効果によりポップな雰囲気も加わっています。画像を使用しない究極の引き算ともいえるデザインが印象的です。

4. サントリーホールディングス株式会社

引用元:サントリーホールディングス株式会社 ホームページhttps://www.suntory.co.jp/

ムービーや商品画像、広告やキャンペーン情報など、色とりどりの画像が並んでいますが、白を基調としているため全体的にすっきりとした印象を受けます。

商品の紹介ページにあるカテゴリーをクリックすると、上部のタグからさらに詳細な絞り込みが実行でき、ユーザビリティにも優れているサイトです。環境活動に対する取り組みなどを紹介した読み物も充実しています。

5. 花王株式会社

引用元:花王株式会社 ホームページhttps://kaobeautybrands.com/en/

ファーストインプレッションはシンプルそのものです。“人の数だけ美がある”というメッセージとリンクする背景画像にも、強いメッセージを感じます。目当てのブランドをクリックすると、新たなページが立ち上がり、公式オンラインショップの導線もスムーズです。

6. 株式会社ワンキャリア

引用元:株式会社ワンキャリア ホームページhttps://onecareer.co.jp/

「人の数だけ、キャリアをつくる。」というキャッチコピーを投影したような、3Dグラフィックアニメーションがトップページを飾ります。

就職活動に関するサービスを提供する企業ということもあり、ユーザーを後押しするような希望に満ちた文言が並んでいるのも印象的です。使う色の数を全体的に抑えたことで、ユーザーに質実剛健なイメージを抱かせます。

7. ベクスト株式会社

引用元:ベクスト株式会社 ホームページhttps://www.vext.co.jp/

 AIの基盤となるテキストマイニングの実施ツールを販売する会社です。トップページの背景に表示されるグラフィック画像は “多数の声から1つの戦略を導き出す”という自社ツールを表しているのが伝わってきます。閲覧者のスクロールに合わせてアニメーションが表示されるため、楽しく文字を追うことができます。

8. TAO TAJIMA

引用元:TAO TAJIMA ホームページhttp://taotajima.jp/

映像作家であるTAO TAJIMA氏のサイトです。見る者の目を引き付けるおしゃれなムービーや、スクロール操作で揺れるように切り替わる画像など、かっこいい仕掛けが使われています。テキストは必要最小限しか使われておらず、映像作家ならではの視覚に訴えるデザインが強く印象に残ります。

9. 株式会社CRAZY

引用元:株式会社CRAZY ホームページhttps://www.crazy.co.jp/

ウエディングプロデュースを行っている企業のホームページです。暖かみのあるカラーリングや柔らかな印象のアニメーションが効果的に使われています。シンプルな構成で、探している内容が見つかりやすく、パートナーシップに関連したさまざまなコラムも興味を引きます。

10. 博報堂アイ・スタジオ

引用元:博報堂アイ・スタジオ(https://www.i-studio.co.jp/

交差点を行き交う人々で始まるムービーが、スタイリッシュな印象を与えるトップページデザインです。過去の実績や手掛けてきたイベントを紹介するだけでなく、新たなクリエイティブを生み出す多様な発想が込められているホームページです。

11. 株式会社aircod

引用元:株式会社aircod(https://www.aircord.co.jp

シンプルなトップページに表示された3Dの企業ロゴが、カーソルと連動して動く仕組みになっています。フォントやカラーリング、細やかなアニメーション使いなど、全てにおいてかっこよさの際立つデザインです。

手掛けてきた作品を一覧で表示しているアーカイブページには、テキストにカーソルを合わせるだけで画像が表示される仕掛けがあり、訪問者を楽しませてくれます。

12. 株式会社WHERE

引用元:株式会社WHERE ホームページhttps://where.inc/

積み上げてきた実績を、1つひとつ振り返るよう丁寧に紹介するホームページです。無機質な印象を受けるテキストのみのトップページをスクロールすると、地域の活性に尽力する人々の豊かな表情が映し出されます。程よく使われているアニメーションも効果的で、閲覧者の興味を高めてくれます。

13. HARIO株式会社

引用元:HARIO株式会社 ホームページhttps://www.hario.com/

耐熱ガラスメーカーの老舗です。情報がダイレクトに伝わってくるような、シンプルでわかりやすいトップページです。商品紹介ページも同様にシンプルな構成ですが、スペシャルページの記事をクリックすると、手の込んだアニメーションが使われていて、読み手の関心を引き付ける工夫がされています。

14. 株式会社電通

引用元:株式会社電通 ホームページhttps://www.dentsu.co.jp/

主要なカテゴリーは上部タブに設置されていますが、画面をスクロールしていくとカラフルなパネルが表示され、これらが各コンテンツの入り口になっています。

マーケティングに関するコラムや対談へのリンク、企業の取り組みなど、さまざまな視点から企業の情報を発信しているホームページです。

15. 任天堂株式会社

引用元:任天堂株式会社 ホームページhttps://www.nintendo.co.jp/

かの有名な「マリオ」を生み出した日本を代表するゲームメーカーです。各ゲームの紹介動画が用意されていて、ユーザーの好奇心を向上させます。

上部のタブにカーソルを合わせると、さらに目的別のカテゴリーが表示され、豊富な情報量ながらも見やすくまとめられているのがポイントです。

かっこいいデザインのECサイト15選

デザインが優れているサイトは、ユーザーの記憶に残ります。ここからは、また訪れたいと感じるようなデザイン性と、ユーザビリティの両方を兼ね備えたECサイトを紹介します。

1. MoMA Design STORE

引用元:MoMA Design STORE ホームページhttps://www.momastore.jp/shop/default.aspx

新商品やキャンペーン情報への導線の良さが高い評価を集めているサイトです。商品別、デザイナー別での検索はもちろん、さらにカテゴリーを細かくすることで探している商品にたどり着きやすくなっています。質問チャットも設置されており、ユーザビリティに配慮されたホームページです。

2. MR.CHEESECAKE

引用元:MR.CHEESECAKE ホームページhttps://mr-cheesecake.com/

見た目でも濃厚さが伝わるチーズケーキの写真がトップページ全面に使われています。ただ注文を受けるだけのサイトではなく、コラムが多数掲載されているのもポイントです。余白を大胆に使ったレイアウトが、商品を強く印象付けるという優れた効果を発揮しています。

3. RonHerman

引用元:RonHerman ホームページhttps://ronherman.jp/

テキストが控えめで、写真が際立つデザインです。上部にあるタブから求めている情報へもアクセスしやすく、商品画像にカーソルを合わせると、商品名・価格が表示される仕組みになっています。シーズンごとのコレクションもまとめて閲覧できます。

4. RINGO

引用元:RINGO ホームページhttps://ringo-applepie.com/non/berry/

フレッシュなリンゴを使ったアップルパイの魅力が伝わるトップページです。製造工程を紹介するムービーや、さりげなく使われているアニメーションがアクセントになっています。開催中のイベントやキャンペーンへの導線もわかりやすく設計されていて、ユーザビリティに優れています。

5. THE PARFAIT STAND

引用元:THE PARFAIT STAND ホームページhttps://theparfaitstand.com/

ポップなカラーリングで賑やかな印象を与えつつ、どこかクールな印象もあるパフェスタンドのサイトです。ユーザーの興味が自然と高まるような楽しい仕掛けが魅力的です。

ムービーやアニメーションもふんだんに使用されていて、商品の魅力をダイレクトに伝えることに成功しています。

6. SK−Ⅱ

引用元:SK−Ⅱ ホームページhttps://www.sk-ii.jp/

シンプルな2つのタブでカテゴリー分けされた先には、多数の商品画像が並んでいて、どの商品が売れ筋なのかがひと目でわかるようになっています。トップページには、SK−Ⅱのコンセプトが伝わってくるアニメーションやムービーが公開されています。

7. クナイプ

引用元:クナイプ ホームページhttps://www.kneipp.jp/

カラフルでありながら、落ち着いた印象のホームページです。トップページには、数量限定・季節限定商品の画像が大きく表示され、ユーザーの購買意欲を後押しします。

「ハーブについて」「バスソルトの選び方」など、顧客の疑問を解消する項目が用意されていて、好感度の高いサイトになっています。

8. BOTANIST

引用元:BOTANIST ホームページhttps://botanistofficial.com/shop/default.aspx

ヘアケア・ボディケア製品のホームページです。トップ画像の背景には、ブランドを象徴するみずみずしい植物の画像が表示されています。

上部に設置されたタブからカテゴリーごとのページへ進み、商品画像をクリックすると詳細が表示される仕組みになっています。使用方法を紹介する動画や美容に関するコラムが充実しているのも特徴です。

9. Fred Perry

引用元:Fred Perry ホームページhttps://www.fredperry.jp/

スポーツウエアが原点のアパレルブランドです。整然と並んだ商品画像にカーソルを合わせると、カラーバリエーションやモデルの着用画像が見られるようになっています。

ブランドの歴史やサブカルチャーにまつわる記事も用意されていて、FRED PERRYの多彩な魅力が発見できるサイトです。

10. SALONIA

引用元:SALONIA ホームページhttps://salonia.jp/special/genderless/

全体的に色味を抑えたクールなデザインに、カーソルを追従するシンプルなアニメーションが効果的です。アイテムを使用したスタイル写真も掲載されていて、ユーザーの購買意欲を向上させます。ジェンダーレスがテーマの商品展開をするなど、新しい視点を大切にした企業であることも伝わってきます。

11. BALMUDA

引用元:BALMUDA ホームページhttps://www.balmuda.com/jp/

デザイン性の高い家電製品を展開している企業らしいシンプルでかっこいいホームページです。新商品やオンライン限定商品が紹介されていて、訪れたユーザーの好奇心をかき立てます。

商品の詳細ページでは、その商品を使用したレシピが紹介されているなど、訪れたユーザーに対してのホスピタリティも感じられます。

12. PRADA

引用元:PRADA ホームページhttps://www.prada.com/jp/ja.html

イタリアを代表するハイブランドのサイトです。トップページに最新コレクションの動画が表示され、そのシーズンのテーマやデザインのポイントについて知ることができます。コレクション別・素材別で商品が探せるのもポイントです。

13. RIMOWA

引用元:RIMOWA ホームページhttps://www.rimowa.com/jp/ja/home

ドイツのスーツケースブランド RIMOWAのサイトです。上部に設けられたタブから見たい情報へとすぐにアクセスでき、商品画像からデザインごとのカラーバリエーションもひと目で確認できます。商品のスタイリッシュさをより引き立てるすっきりとしたデザインが特徴です。

14. A.P.C

引用元:A.P.C ホームページhttps://www.apcjp.com/jpn/

カジュアルなデザインが人気のアパレルブランドです。画面の左半分には、ブランドロゴとともにカテゴリーが表示されていて、カーソルを合わせるごとに右半分の画像が切り替わります。

より詳細なカテゴリーページが用意されていることで目当ての商品が見つけやすく、サイズや色で絞り込みを行うフィルターも設置されています。

15. +SHIFT

引用元:+SHIFT ホームページhttps://plusshift.jp/place/

東京都内に特化したオフィスビル情報を紹介するサイトです。トップページに掲載されている画像はどれもスタイリッシュで、画像をクリックすると、そのビルの立地やフロアのレイアウトがわかるようになっています。

360°パノラマ内見の画像も用意されているなど、見た目のおしゃれさだけでなく、利便性にも優れたホームページです。

ホームページデザインのおさえるべき6つのポイント

かっこいいホームページ作りを実現させるために、覚えておきたいポイントを解説します。成果につながるホームページには、以下のような共通点があります。

1. ファーストビューでユーザーの興味関心を惹きつけられるか

トップページのデザインは重要です。特にこれといった目的がなくサイトを訪れた訪問者は、トップページを見て興味が持てないと判断すると、わずか3秒ほどでブラウザバックしてしまいます。そのため、ファーストビューでどのようなイメージを打ち出すかはとても重要です。

2. 適切な配色になっているか

カラフルな配色のホームページは、一見すると楽しげで好印象を受けるかもしれません。しかし、実際に使ってみると、どこにどのような情報があるのか見つけにくいといったことがよく起こります。一般的にはベースカラー75%、メインカラー25%、アクセントカラー5%が最適な配色の割合といわれています。

3. ユーザーファーストが徹底されているか

かっこよさにこだわりすぎて、ユーザビリティが後回しになってしまっては意味がありません。閲覧者が知りたい情報へ、スムーズにアクセスできる導線が大切です。利便性を高めるための検索窓やカテゴリー表示は上部にまとめて配置するなど、使いやすさも大切にしましょう。

4. レイアウトや情報がシンプルでわかりやすいか

複雑なレイアウトや読み取りにくい文字は、ユーザーのストレスになりかねません。目立たせたい部分は画像やムービーを使用して強調し、伝えたい情報はわかりやすくシンプルに記述するなど、メリハリのついたデザインが好印象を与えます。

ワイヤーフレームについて

レイアウトを上手く構成するためのツールとして「ワイヤーフレーム」があります。ワイヤーフレームとは、ホームページのコンテンツやレイアウト(配置)を確認して、整理するための構成図です。

各ページを制作する前にレイアウトを決めておくことで、サイト全体の統一感を保てます。以下のようなポイントに注意して作成してみましょう。

  • スッキリしていて見やすいか
  • 最も伝えたいことが目立っているか
  • ユーザーの知りたい情報がどこにあるのかわかりやすいか
  • ある程度サイト内を回遊できる作りになっているか

カラムレイアウトの種類

ホームページに掲載する各パーツを最適な位置に配置するために、ページ内での段組みを行います。この段組みのことを「カラム」といいます。ここではカラムの配置に応じたレイアウトの種類について説明します。

シングルカラムレイアウト

シングルカラムレイアウトは、すべてのコンテンツを縦に並べて配置するレイアウトです。コンテンツがひとつの枠にまとめられているため、ユーザーの視線の移動が少なく、訴求ポイントに集中させる効果があります。最近はスマートフォンでの閲覧が多いこともあり、縦長のシングルカラムレイアウトが増加しています。

マルチカラムレイアウト

マルチカラムレイアウトは、ページを複数の列に分割して配置するレイアウトのことを指します。回遊性が重要視されるポータルサイトやニュースメディアに用いられることが多いレイアウトです。2列で「2カラムレイアウト」、3列で「3カラムレイアウト」となります。

2カラムレイアウト

2カラムレイアウトは、2列に分けた段組みのレイアウトです。ECサイトやコーポレートサイトでよく見られます。左側にサイドバーでメニューを表示し、右側にメインのコンテンツを置くパターンが一般的です。

3カラムレイアウト

3カラムレイアウトは、3列に分けた段組みのレイアウトです。情報量が多く、一度にさまざまな情報を載せたい場合に用いられます。メインコンテンツの両側にサイドバーを設置することが可能になり、ユーザーに対して多くの選択肢を提示できます。

パーツの種類

それぞれのページのレイアウトを作るために必要なパーツについて説明します。

ヘッダー

ヘッダーには、ホームページのタイトルや説明文などを記述します。統一感を保つため、各ページ共通とするのが基本です。読んだだけでどんな内容のホームページなのかわかるようなタイトルを考えましょう。

ナビゲーション・メニューバー

ナビゲーションやメニューバーをつけることで、複数のページをカテゴリ別にわかりやすく整理すると、ユーザーを目的のページへ誘導しやすくなります。

コンテンツ

メインとなる内容を記述する場所です。テキストに加えて画像や動画などを挿入することで、視覚的にユーザーの目を引きつけながら、リンクボタンを効果的に配置して、目的のページまで誘導する工夫をします。

サイドバー

サイドバーと呼ばれる、メニューをページの上部に置くのではなく、コンテンツの左側や右側に並べてカテゴリ別のメニューにリンクする方法もあります。人気記事のランキングや月別のアーカイブ、各種SNSの連携機能など、さまざまなコンテンツへのリンクを入れることも可能です。

サイドバーを配置するためには、後述する「カラムレイアウト」のうち、マルチカラムレイアウトを選択する必要があります。

フッター

ページ最下部にある共通部分のことです。多くの場合、コピーライト(著作権)やサイトマップの表示に使われています。

上記のような「レイアウト構成」をイラストに書き起こしたものを「ワイヤーフレーム」といいます。以下の記事ではカラムごとの特徴を解説したり、ワイヤーフレームよりも前に作成する「サイトマップ」についても詳しく書いています。併せてご覧ください。

5. スマホ対応されているか

今やスマートデバイスからのブラウジングは一般的なものになっており、スマートフォンに対応していないサイトは閲覧者が激減するといっても過言ではないでしょう。スマホ対応には主に二つの方法があるのでご紹介します。

  1. スマホ用、PC用のページを設ける

スマホ対応の方法として挙げられるもう1つの方法が、スマートフォン専用ページを作成することです。HTMLとCSSの両方を別々に作成し、.htaccessやPHPなどでリダイレクトすることでPC版とスマートフォン版に振り分けます。

PC用とスマートフォン用のそれぞれに最適化されたレイアウトが構成できるというメリットがありますが、2つのホームページを作成することと同義なため、作業量が2倍になるという点が大きなデメリットです。

  1. レスポンシブデザイン

レスポンシブデザインとは、ホームページを閲覧しているユーザーの画面サイズに応じて表示を最適化する表示方式を指します。「responsive」は直訳すると「反応する」や「敏感な」という意味をもち、PCやスマートフォン、あるいはタブレットなど、デバイスの画面サイズに反応して自動的に切り替わるデザイン方式です。

現在、CMSといったわかりやすいインターフェースを使って直感的にホームページを作成・編集・修正できるツールでは既にレスポンシブデザインが搭載されています。そのため、スマホ用とPC用のページを設ける必要がないので時間やコストをかけずにスマホ対応することができます。CMSについてより詳しく知りたい方はコチラの記事をご覧ください。

また、以下の記事ではこれからホームページを作る方や、既にホームページを持っている方を段階別に分けて、レスポンシブデザインへ対応するための具体的な方法が説明されています。併せてご覧ください。

6. トンマナ、フォントに一貫性があるか

どのような層をターゲットにホームページを制作するかを決定し、文体や画像の雰囲気を統一するようにします。トンマナだけでなく、使用するフォントについても特別な理由がない限りはホームページ全体で統一しておくとよいでしょう。

3つのホームページ作成方法

これまで、デザイン性の高いホームページやギャラリーサイトの紹介を行いました。参考にしたいホームページが見つかった方も多いはずです。しかし、実際にホームページを作成しようと思っても何から手をつけていいのかわからない方もいらっしゃるのではないでしょうか?

そのため、この章ではホームページの作成方法をメリット・デメリットと共に3つ紹介しています。自分に合った作成方法を見つけ、理想のカッコいいホームページを作成しましょう。

1. ホームページ作成ツールを使う(ノーコード)

ホームページ作成ツールを用いて、難しいデザインや開発を用いず、自ら作成する方法があります。
HTMLやCSSといった専門的なエンジニアリング知識は基本的に不要であり、無料から使用
できるものもあります。費用を抑えつつも、自らのイメージに近いホームページを作成した
い方にはおすすめ
の方法と言えます。

メリット
  • テンプレートなどを活用することで、専門的の知識がほとんどなくとも作成することが可能
  • 制作会社に依頼するよりは、コストを大きく抑えることができる(無料で扱えるツールもたくさんある)
デメリット
  • 自分が思ったようにカスタマイズして作成できない(テンプレートによっては制限がある)
  • 全くパソコンやITに触れていない人の場合、活用するのはかなり困難

具体的なホームぺージ作成ツールは以下の記事で紹介しています。また、ホームぺージ作成の流れや失敗しないためのコツも記載しているので、初めてホームページを作成される方にぴったりな情報が満載です。是非あわせてご覧下さい。

2. HTMLとCSSなどのコードを自分で書く

HTMLやCSSといっ たコードを自ら書き、作成する方法です。
ちなみに、HTMLとCSSとは簡単に説明すると、下記のようなものです。

HTML:Webサイトに表示されるテキストや画像・リンクなどを記述する
CSS:表示されるテキストのフォントや色、大きさや画像の位置などを調整する

プログラミング言語としては、決して学習コストが高いものではありませんが、全くエンジニアリングの知識がない方には多少ハードルが高いため、コーディングに興味・関心がある方にのみおすすめできる方法と言えます。

メリット
  • デザインやレイアウトなど、完全にオリジナルにできる
  • 外注の制作費がかからないため、コストを抑えることができる
デメリット
  • 専門的なエンジニアリングの知識が必要となる
  • 運用・管理のフェーズを考慮すると、予期せぬ対応が必要となった場合にサポートが不十分である

自分で一から学んで作成するとなると、多大な時間を要してしまうため、お急ぎでホームページを作成されたい方には不向きと言えます。パソコンをお持ちの方は、macやWindowsに備わっている標準のテキストエディタ作成することも可能ですが、全くの初心者にはおすすめできません。

一般的にはホームページ制作ツールを使用して自分で作成するか、制作会社に依頼されることが多いかと思いますが、もしそれでもHTML,CSSでの作成に挑戦されたい方には以下の記事を参考にしてください。HTMLとは?CSSとは?の基礎的な説明から、実際に作成するまでのステップを詳細に解説しています。

3.制作会社に依頼する

最後に、ホームページ制作会社に依頼する方法があります。
専門的な知識はもちろん、自社の社員リソースを圧倒的に使わずに済むことができます。
コストに一定の余裕があり、かつ一定のスピードとクオリティを重視する場合には、おすす
の方法と言えます。

メリット
  • 最終的な欲しい目的の設計から、プロと一緒に進めることができる
  • 集客やマーケティング、ブランディングといった観点まで設計したホームページを作成することができる
デメリット
  • コストがかかる
  • メンテナンスなどの管理に手間がかかる

ホームページ制作会社に依頼する際の費用感としては50万円〜500万円と幅が広くピンキリです。

デザインや機能などをあまり求めないライトなものだと50万円~150万円ほど、一定のクオリティやオリジナリティを求めると150~500万円ほど、コーポレートブランディングなどを踏まえて意匠を凝らしたようなデザインにする場合は500万円以上かかってきます。

ホームページ制作に必要な期間としても少なくとも3ヶ月〜半年かかることが多いので、金銭的・時間的余裕がない場合にはおすすめできません。それでも制作会社に依頼したいとお考えの方には、以下の記事で具体的な制作の流れ、費用、注意点、またおすすめの制作会社について詳しく解説しているので、参考にしてください。

まとめ

さまざまなデザインに触れて学び、見た目のスタイリッシュさだけでなく、伝えたいことがしっかりと届くようなホームページを作りましょう。成果につながるノウハウを取り入れながら、閲覧者の興味関心を高めるホームページ作りを実現させてください。
ホームページを自身で作成するのが困難な場合には、制作会社に依頼するのも1つの方法です。

初期費用0円、月額9,000円〜
プロが作るホームページ作成サービス

siteflowはプロが作って自分で更新できるホームページ作成サービスです!

お客様の状況を専任担当が丁寧にお聞きして、最適な構成とデザインをご提案。
最短4週間でオリジナルのホームページをプロが作成します。更新作業は直感的で操作しやすい管理画面からご自身でいつでもカンタンに。

  • 初めてのホームページ作成で不安
  • どんなホームページにすれば良いかわからない
  • 公開後もしっかりサポートして欲しい

このようなお悩みをお持ちの方はプロにお任せできるホームページ作成サービスのsiteflowにお任せください!まずは無料相談から。