webサイトレイアウト編

2023年2月20日 00:00

今日はwebサイトのレイアウトに関して勉強しています
・シングルカラムレイアウト
・マルチカラムレイアウト
・カード型レイアウト

シングルカラムレイアウト
・少ない情報量に向いている
・情報を縦に積んでいくのでPC、スマホ、縦型タブレットなどでも読みやすい
・上から下へ情報を読んでいくので、内容に集中しやすく、操作性のストレスも少ない
・モバイルファーストといわれてきてるし今後増えてくる可能性高いですね

まずは１カラムレイアウト（シングルカラムレイアウト）をまとめたサイト集https://sankoudesign.com/category/1column/

シングルカラムレイアウトといっても、作り方をちょっと変えたら
見せ方も変わってきますね。シングルレイアウトの基本を学びながら
単調なレイアウトになりがちなので、それをどう補っていくか。などなど

マルチカラムレイアウト
・いろいろな情報を一覧できる
・サイト内を目的に沿って回遊しやすい
・ニュースサイトに多い
・スマホで同じように表示しようとすると無理がある

北欧、暮らしの道具店
・2カラムレイアウト
・情報量が多い（読み物、EC
・サイドメニューがあるものが多い
（スマホの場合はハンバーガーメニューに挿入）
・ヘッダー固定
・スマホでも操作性が高い
https://hokuohkurashi.com/

Yahoo! JAPAN
・3カラム覧できる
・ユーザーが利用したくなるサービスが豊富レイアウト
・色々な情報を一覧できる
・ユーザーが利用したくなるサービスが豊富
https://www.yahoo.co.jp/

カード型レイアウト
・カードごとに一つの情報
・タイル型とも呼ばれている

ピンタレスト
・カード型レイアウトの代表といえばやはりここでしょうか
https://www.pinterest.jp/

この記事が気に入ったらサポートをしてみませんか？

webサイト レイアウト編