ブックカフェWebサイト

ブックカフェのWebサイト
Webサイト

制作範囲: 企画/アイコンデザイン/webデザイン/コーディング

URL: https://fukase.info/SunnysideBookCafe/

Trial and Error

制作中の深瀬鮎美のあたまの中身と試行錯誤をみる

制作にあたっての目標

HTML等の基礎を受講し、それを使って1からwebサイトの形のものを作成してみる

制作範囲

企画・ワイヤーフレーム/サイトデザイン/コーディング

制作期間

企画・ワイヤーフレーム・デザイン、10日程度コーディング15日程度

ワイヤーフレームを見る

使用ツール

Illustrator/Photoshop/Figma/WebStorm

デザインについての説明

初めて1からWebサイトを作成してみました。まず、Webサイトにはどんなページが必要なのか等を調べるところからはじめました。コーディングは、どこから手をつけたら良いのかわからないくらいでしたが、調べたり、講座を見直しながら、なんとか形にすることができました。とくに、レスポンシブデザインが難しいと感じました。実際に自分のつくりたいWebサイトを作成すると、動画でみた講座の内容が身についたように感じられました。デザインは、のんびりできるブックカフェ/ターゲットは30~40代の、趣味がカフェで読書という、リラックスしたい人をイメージしていたため、落ち着いたブラウンを基調とし、ほっこりしながら幼くなりすぎないように作成しました。

今回気がついたこと・得たこと

・ボタンとそれ以外の目立たせたい部分のあしらいを、統一感があり良いと思って、角丸の枠で囲むように、揃えていたが、しっかり区別しないとどこが押せてどこが押せないのかが、一目ではわからないWebデザインになっていた。グラフィックデザインとの違いを実感できた。
・参考にWebサイトを制作する立場で多数閲覧し、自分なりにデザインや構成などへの知識を蓄えました。
・授業では、決まったコードをお手本の通りに書いたので、Webサイトのデザイン自体に何が必要なのか、というところから調べられた
・Webサイトとして、おかしい/美しくないデザインがあるということを学習できた。
・デザインして、それを実際に動かしたりクリックすることのできるWebサイトのかたちにする楽しさを味わえた。