2025年07月 2025(令和7)年 Web制作 デザイン

WEBサイト用にシンプルなレイアウト集を作りました。

完成しました。「WEBサイト シンプルなレイアウト」
Yamashiro_75

Yamashiro_75(山城_なご)

故郷での生活が大好きな沖縄人。パートで事務員をする傍ら、副業としてWEBデザイナーの活動を行っている。 本業、副業、家事を両立させる傍ら、ブログサイト「もとなごの日常」を立ち上げて日々自身の生活の様子や、WEB制作や沖縄に関する情報を発信している。

お久しぶりです。WebデザイナーのYamashiro_75(やましろ_なご)です。

6月の投稿で報告した、WEBサイトのシンプルなレイアウト集が完成しました。今日はそのサイトについて紹介させていただきます。

WEBサイト シンプルなレイアウト(トップ画面)
ページトップ画面

サイトのURL:https://yamashiro75.com/layout_sample/

タイトルの通り、WEBサイトにおける基本的、かつ汎用性の高いレイアウトをまとめたページになっています。あくまでPC用に作られたていますが、レスポンシブ(スマホ)にも対応しています。

最初は1カラムのレイアウトから始まり、下にスクロールしていくと2カラム、3カラム…と段々複雑で要素が多くなります。

レイアウト集なので、画像や映像は一切なし、最低限のテキストと動きのみで構成されています。なので、レイアウトを考える際に目を惑わす要素をできるだけ排除された作りになっているのが特徴です。

タイトルの通り、WEBサイトにおける基本的、かつ汎用性の高いレイアウトをまとめたページになっています。あくまでPC用に作られたていますが、レスポンシブ(スマホ)にも対応しています。

最初は1カラムのレイアウトから始まり、下にスクロールしていくと2カラム、3カラム…と段々複雑で要素が多くなります。

レイアウト集なので、画像や映像は一切なし、最低限のテキストと動きのみで構成されています。なので、レイアウトを考える際に目を惑わす要素をできるだけ排除された作りになっているのが特徴です。

WEBサイト シンプルなレイアウト(一部)
ページの一部
WEBサイト シンプルなレイアウト(一部)
ページの一部

ヘッダーのメニューに拘りました!

サイトを上下に何度も周遊することを想定して、ヘッダーのグローバルナビゲーション(メニュー)を常に画面上端に固定しています。

それだけでなく、トップ画面から下にスクロールを始めると、メニューの背景が徐々に透明になる仕様になっています。それによって、メニューが画面の上部を常に遮ることがないようにしています。

作りはシンプルですが、閲覧者が快適にサイトを見られるように細かなアニメーションを付けた拘りのナビゲーションです。

今後も更新・追加していきます。

今はシンプルで簡単に作れるレイアウトをまとめたページです。今後も別のレイアウトがあれば随時追加していく予定です。

興味があればぜひご覧ください!

サイトのURL:https://yamashiro75.com/layout_sample/

  • この記事を書いた人
Yamashiro_75

Yamashiro_75(山城_なご)

故郷での生活が大好きな沖縄人。パートで事務員をする傍ら、副業としてWEBデザイナーの活動を行っている。 本業、副業、家事を両立させる傍ら、ブログサイト「もとなごの日常」を立ち上げて日々自身の生活の様子や、WEB制作や沖縄に関する情報を発信している。

-2025年07月, 2025(令和7)年, Web制作, デザイン