【概要】

ラーメン×カフェというコンセプトの架空飲食店サイト。
大学3年生の「WebデザインⅡ」の講義の最終課題で制作した。当時ラーメン屋とカフェでアルバイトをしていたため、「ラーメン×カフェ」というコンセプトを決めた。内装や雰囲気は「カフェ」であるため。ターゲットを10代~20代の女性と定めた。 制作のゴールは、「カフェの雰囲気を最大限に表現すること」「見やすいレイアウトの実装」である
※「ホーム」と「STYLE」ページのみの制作

【制作スタイル】

◎実施内容
デザイン/コーディング

◎作業人数
1人

◎制作期間
3週間

◎使用ツール
HTML/CSS/XD/Jimdo

◎成果
・見やすい文字間隔やレイアウトを考え、実装できた
・レスポンシブ対応の実装ができた

【ポイント】

①雰囲気重視
・ラーメン×カフェという設定であるため、カフェの雰囲気が伝わるようにシンプルかつおしゃれなデザインを考えた。
・「素材そのもの」を大切にしている設定で、自然を感じられるように所々に「緑」をポイントカラーとして配色した。

②見やすい行幅の設定
・これまで文字幅の間隔を設定せず、見にくい文章となっていたため、本制作では行幅を1.75に設定することで、読みやすいレイアウトを実装。

③見出しのアクセントによる着眼の誘導
・見出しの部分は文字のフォントを大きくするだけではなく、左に緑のボーダーラインをつけることで、より目を引くデザインにした。