お知らせ（いくつ知ってる？webレイアウト）｜YORIYORK｜栃木県佐野市

Yoriyork WEBチームです。

webサイトを作成・運用する目的は何でしょうか？

「商品を売りたい」「人を集客したい」「仕事の問い合わせを増やしたい」など、それぞれ目的があると思います。そして目的を達成するために重要なのがwebデザインではないでしょうか！
今回は、よく使用されるレイアウトを参考サイトと共に見ることで作成のイメージを深めていきましょう！

レスポンシブデザイン

あなたはどんなデバイスを使用してこの記事を読んでいますか。
PC、スマートフォン、タブレット？
もしかしたらゲーム機を経由したテレビ画面、ということもあるかもしれません。

webを閲覧できる端末が増えた昨今、モニターに合わせてサイトが閲覧できることが重要視されています。
その考えのもと、設計・調整されているのがレスポンシブデザインです。これから紹介するサイトもレスポンシブデザインとして作成されています。
端末によってのデザインの違いも確認してみてください。

カラムレイアウト

カラムとは（縦列）のことです。このカラムの数で機能性や印象をガラリと変えることができます。

【シングルカラム】

参考サイト：http://www.tokyo-jazz.com/x/
上から下へのシングルカラム（１列）の構成にすることで、ユーザーの目線を誘導しやすく、コンテンツに集中させることが出来ます。
レスポンシブデザインと相性が良く、汎用性があるレイアウトです。
また、コンテンツを読ませる流れを作りやすいため、サービスや商品のランディングページはほぼこのレイアウトで組まれています。

【2カラム】

サイドバーとメインコンテンツの２列（2カラム）で構成された2カラムレイアウトは馴染み深いのではないでしょうか。
サイドバーを設置することで、お買い物サイトなら新着情報やおすすめランキングを、ポータルサイトならバナーの設置やシェアボタンなど外部流入のユーザーに対しても見せたい情報を表示することが出来ます。
汎用性が高く使いやすいレイアウトです。

【3カラム】

参考サイト：http://antique-arles.com/
サブコンテンツ、サイドバーなどを設置出来るため情報量のあるサイトに向いたレイアウトです。お買い物サイトで使われることが多いです。

グリッドレイアウト

参考サイト：http://findmy.tokyo/
ページを格子状に分割し、その格子に合わせて文字や画像を配置するレイアウトです。
秩序や一貫性が生まれ、たくさんの情報をスッキリ見せる事が出来ます。
加えて、格子（グリッド）の幅に差を持たせることで見せたい情報の差を出しやすいのも特徴です。
沢山の情報を扱うポータルサイトなどにもオススメです。グリッドレイアウトは汎用性が高く、画像とテキストをカードのように表現するカード型レイアウト。要素を細かく
しタイルのように敷き詰めたタイルレイアウトといった応用も出来ます。

【ブロークングリッドレイアウト】

参考サイト：http://www.comp.jp/
去年から増えてきたのはブロークングリッドレイアウトです。名前の通りグリッドで綺麗に揃えた要素を「あえて」ズラしたり、重ねたり、崩したりして見せるレイアウトです。キレイに見せたいけど遊びも入れたい時に揃えるべき要素はキッチリ残すことでユーザーの興味を引く流行のデザインにする事が出来ます。

【フルスクリーンレイアウト】

参考サイト：https://30seconds-trip.jp/
スクリーンいっぱいまで画像や、動画を表示させたデザインがフルスクリーンレイアウトです。
ビジュアルによる訴求力の高いレイアウトですが、同時に表示させるイメージの選定が最重要なデザインになります。
イメージが用意出来ないという場合は、有料素材サイトを利用するのも手です。

【スプリットレイアウト】

参考サイト：http://minico.handmade.jp/
スプリットとは、「分割」を意味する言葉です。画面を縦二つに分割し、コンテンツを表示することで左右の対比が生むことが出来ます。
サイトのメインビジュアル×ナビゲーションやナビゲーション×コンテンツとコンテンツ×コンテンツなど様々な組み合わせが出来ます。

【マガジン風レイアウト】

参考サイト：https://www.hinagata-mag.com/
名前の通り、まるで雑誌を読んでいるかのようなレイアウトです。
各記事に対して、タイトルやイメージ、カテゴリやタグ付けが行われておりたくさんの情報からユーザーの興味を引く記事への誘導を行なっています。
たくさんの情報を見やすくするグリッドレイアウトと相性が良く、ニュース・メディアサイトで利用されています。

固定ナビゲーション

スクロールしても表示されるようにナビゲーションメニューを固定するデザインもあります。
画面の上、もしくは横に常設する事でユーザーがどのページにいてもすぐに目的のページにアクセスすることが出来ます。
特にスマートフォンは1ページあたりが長くなることが多いため、上部に固定メニューがあると使いやすく便利ではないでしょうか。

【ヘッダー固定】

参考サイト：https://kawaaitosou.jp/

まとめ

webのレイアウトを紹介してきましたが、いかがだったでしょうか？
一概にwebサイトと言っても様々なレイアウトがありました。
サイトの制作・運用で一番重要なことは「目的」と「コンテンツ」です。
「目的」と「コンテンツ」を活かせるレイアウトと組み合わせる事で、より印象や意図を伝えられるサイト制作が行えます。

あなたの目的にあったレイアウトで素敵なサイトを制作しましょう！

Author:admin｜Category:WEBチーム