Webページサンプル

Webページデザインのサンプルをいくつか紹介します。
全て、レスポンシブデザインに対応しています。

タイル状

コンテンツ画像をタイル状に配置するレイアウトです。
商品や写真などの画像を主に表示したい場合に適したレイアウトです。
サンプルでは全面に色のついた画像を配していますが、背景が透明な画像を配置することでAppleのサイト風のレイアウトになります。

パララックス1

Parallaxを使用した1ページ構成のWebページです。
このページはスクロールする毎にページがオーバーレイする様になっています。
簡単なものですがスクロールに合わせて動く画像のサンプルページもあります。
Parallax効果のために使用しているJavaScriptは自作ライブラリです。

ポートフォリオ

ページの中心(表示が縦長になった場合は上寄り)にコンテンツを配した構成です。メニューはコンテンツ領域の上部に表示されます。
あまり長い文章を書かず、1ページ1つの画像と組み合わせて印象的なページ構成を作るのに向いています

サイドメニュー

上部にページタイトル、左側にページメニューを配したブログ風の構成です。
文章を中心としたページ向きの構成です。

シンプル

上部にページメニューとページタイトルを配したシンプルな構成です。
文章を中心としたページ向きの構成です。