← カタログ一覧に戻る

レイアウトや構図から考えるデザイン

2カラムのレイアウト

2カラムのレイアウトは、情報を整理し、視認性を高める2カラム構成です。左エリアにナビゲーションを固定して見せたり、メニューを細く設置してメインエリアをしっかり見せたり、画面が狭まるとメインエリアだけが残るレイアウトにしたり、メインカラムに被せて見せ抜け感のある2カラムの構成にしたり、中央で画面分割をして見せるスプリットスクリーンレイアウトにしたりすることで、情報を整理し、視認性を高めます。

アイデアと参考サイト

左エリアにナビゲーションを固定して見せるレイアウト

導線を明確にする、固定ナビゲーションの配置。

メニューを細く設置して、メインエリアをしっかり見せるレイアウト

メインコンテンツに集中できる、細いメニューの配置。

画面が狭まるとメインエリアだけが残るレイアウト

レスポンシブに対応した、柔軟なレイアウト。

メインカラムに被せて見せ、抜け感のある2カラムの構成

視覚的なインパクトを生み出す、重ねの活用。

中央で画面分割をして見せるスプリットスクリーンレイアウト

対比を明確にする、スプリットスクリーンの活用。