かつ丼特集のWebサイトを制作しました。
前回作成した雑誌かつ丼特集のWeb展開です。
※このサイトは全て架空の設定で制作したものです。
■制作時期：2016.9
■使用ツール：Illustrator/Photoshop
■実装：HTML/CSS/jQuery
■カテゴリ：Webデザイン
※ワンソースマルチユース（雑誌特集からWebサイト展開）
スポンサーリンク
作品詳細
TOPページ
以前作成したかつ丼特集記事をWebサイトへ展開してみました。（ワンソースマルチユース）
基本的に雑誌の素材をそのまま活用し、同じ方向性のデザインで作成しています。
TOPページでは、左部にタイトルを大きく配置し、右側には各お店の外観を配置しました。
要素の配置は雑誌の表紙と異なりますが、タイトルの周りの空間やお店の外観をきちんと整列させたことでシンプルな雰囲気を出し、雑誌とデザインの方向性を共通にしました。
TOP画面の下部には各お店のかつ丼を正方形で並べ、クリックすると各お店の紹介ページに遷移するようになっています。
また、スマホでは、レイアウトを可変させるレスポンシブ対応となっています。
詳細ページ
かつ丼の紹介ページでは、雑誌とはレイアウトを大きく変更しています。
PCサイトは、横幅が長く、１行が長すぎると読みにくいため、左右のマージンを多めに取り、読みやすく工夫しています。
また、TOPのかつ丼のアイキャッチ画像も画面全体に表示させるのではなく、
一部を切り抜きにし、1画面にアイキャッチと本文を表示させることで、特集記事サイトであることが分かるように工夫しました。
こちらのページもスマホでは、レイアウトを変えるレスポンシブ対応となっています。
