ポートフォリオサイト 詳細説明

コンセプト

ポートフォリオサイトはコンテンツ重視。使用する色も抑えてシンプルなフラットデザインにしました。

レスポンシブWebデザイン

モバイルに対応したレスポンシブWebデザインを採用することにより、デバイスの幅ごとに最適なレイアウトに可変します。

表示領域の小さいスマートフォンサイズ(600px未満)ではワンカラムでレイアウトし、フォトスライダーの画像は縦長の画面で見やすい縦長画像、メニューは最下部にボタンで表示しています。

あるていど表示領域の広いタブレットサイズ(600px以上960px未満)では写真以外の要素もファーストビューに表示したいので、フォトスライダーの画像は横長画像に入れ替え、全体を2カラムにしフォントのサイズなどを細かく調整しています。

PCサイズ(960px以上)では全体を2カラムのまま、メニューを右上に表示しています。

変形するグローバルメニュー

スマートフォンやタブレットサイズの時にはページ最下部でボタン化し、PCの時は右上部でメニュー化します。

画像が切り替わるフォトスライダー

スマートフォンサイズの時には縦長の画像を読み込み、PCやタブレットサイズの時には横長の画像を読み込みます。

ページトップに戻る▲

← ポートフォリオサイトへ