見出し画像

【Webデザイン】卒業制作記録（2/3）デザインからコーディング編

mai_ka

こんにちは！今回は前回のブログの続きになります。

前回の記事

デザイン～コーディングについて書いていきます。
How Toを書いているわけではありません！振り返りと気づきなんかを書いています。

04-デザインを開始！素材もつくるよ！

02-の事前準備の段階でコンテンツは決定していて、参考サイトも決定していたのであとはどんなレイアウトにするか、サイト内どんな要素をいれるか、を考えました。よくあるコンテンツ（ブログ、FAQ、お問い合わせ…）にあまり奇をてらったデザインをあててもユーザーには煙たがられると思うので、メインビジュアルとAboutでサイトの空気感が伝わるようにすることを心掛けました。

サイトの強みとしては

・紅茶だけでなく、紅茶を起点とした様々なレッスンが受けられて多面的に学べるので自分のティータイムを豊かにできる。
・レッスンはほぼすべてオンラインで実施しているので、場所関係なく参加ができる。
・ブログの更新性が元々高いのでそこを活かして、元々紅茶が好きな人も楽しめるサイトにする。（サイト自体がティータイムの時間に寄り添うサイトである。）

この要素をデザインで表現しようと考えました。特に、ブログの更新性からみて「ちょっと覗きにいくたくなる」「紅茶の特集雑誌を読みに行く」そんな…、一言で言うと「素敵！」と思わせるようなものを目指しました。

04-01 イラスト制作

前回のアンケートの問⑨で「３・シンプルだけどイラストがあってかわいい感じのサイト」の回答をもらっていて、今回は素材（イラスト）がメインになるため、イラストから作成を始めました。（自分のポートフォリオサイトはトンマナ合わせるために全体→素材作成の順番でつくっています）

（※私はイラストを描くのは得意な方なので、得意に走ったデザインは正直どうなのだろうか…と思いましたが、トレーナーチェックの段階で「得意は全然伸ばしましょう！」と言われたので安心して制作に臨みました。得意、のばします！！）

まず、イラストのテイストもなかなか幅が広いのでInstagramのシンプルなテイストのイラストを探しました。ターゲットは30-40代の女性なのであまり派手さのないナチュラルテイストに近いものを選び６つに分類しました。

６つに分類したものは無断転載になってしまうので簡単なラフをクライアントさんにお送りして、イメージに近いものを選らんでいただきました。

画像1

今回も信じられないほど字が汚いですがニュアンスでうけとってもらえました…笑

クライアントからの回答としてはA、でもEFも捨てがたい…見る方が惹かれるもので！ということでしたのでAEFをこちゃっと混ぜたものを採用しました！必要なイラストを描いていきます。

7/9あたりにイラスト描いてたんだと思います。
おそらく１日では終わらず、イラストは夜とか、土日にもちまちま描いてたと思います。途中ネコチャンも追加してほしいと要望もあったのでネコチャンだけは緻密にかきました。かわいいよねネコチャン

画像2

企画書を作成する段階で、紅茶にまつわる本を数冊読みました。紅茶の起源とか、文化とか…、あとはやっぱりイギリスというキーワードも大事にしたかったのでイラストもフォントもそこを軸にしてゆかりがあるものにしています。

04-02 メインのフォント

ーどんなときにお茶を飲みますか？
かつてのカフェは女性禁制の男性のみがコーヒーを飲む場所、議論をする場所として利用されていました。
そこで女性も楽しく過ごせる場所としてできたのが「サロン」
最初は英国の王室御用達として楽しまれた紅茶でしたが、やがて階級を超えておしゃれなインテリアの中で優雅に紅茶を楽しむ文化が国民的嗜好品となったのです。
あなたはどんなときにお茶を楽しみますか？

サイトより一部抜粋

LIGのデザイナーのありさんのnoteで書かれていたフォント＝歴史的背景！を参考にメインのロゴを決定しました。※１７世紀後半から１９世紀起源

見出しh2 : Googleフォント　Prata

見出しh3: Googleフォント　Shippori Mincho

邦文は完全にニュアンスで選んでますが少し文字が大きいところはこれで調整しています。トレーナーチェックの段階で「Webフォントの多用はページが重くなるので使いすぎに注意」という指摘もあったので、通常の文章には游明朝を使っています。

04-03 デザインフィードバック

スクリーンショット (23)_LI

大体TOPが固まれば今回はそのコピペでいける構成だったので大体１日に１ページを作っていった感じです。今回はすべてAdobeXDで作成しています。XDでどうしても再現できないところは一部PhotoShopを使っています。

ティータイムを楽しむ時間は人によって違うので上から朝→夕方をイメージした背景色に設定しました。footerのロンドンの街並みに夕焼けを重ねられればいいな…と思ったのでオレンジ背景色のコンバージョンボタンを設置しています。ここは企画書にもかいていませんが、「なぜ背景色をこの色にしたのか？」という問いに答えるために準備していました。聞かれませんでしたが…笑

実は私の最初の制作物（名刺）をチェックしていただいたのが、卒制の担当トレーナーと同じ方で、その時に「何か色でも、図形でもなぜこれにしたのか」をデザイナーは説明できないとならない、という指摘をもらっていたのでそれ以降何故？を繰り返し、意味をもたせて制作をしています。

デザインチェック日に細かいところのフィードバックをもらいました！一部ダブりページというか、ここはこの情報だけでまとめた方がいい！という箇所があったので最初の構成を変更することにしました。第三者の意見は本当にありがたいですね。
企画書チェック時と同じくほかのメンバーのFBも聞いててとても参考になりました。う～ん作ってみたいサイトがたくさんあるなぁ…

05-コーディング！大体１週間くらい

05-01 コーディング開始！

コーディングは大体１週間かかりました。文章をすべてテキスト化して、使用するイラストの用意と名前の統一とTOPのマークアップをしてからできるとこからやっていきました。JS、jQueryは最後あたりにつけていってます。

初回のミーティングやチェック時に、トレーナーからコテコテのブランディングサイトでない限りあまり動きをつけすぎない方がいい、と言われてたので動きは控えめです。

05-02 コーディングチェック

同じ卒制メンバーなら覚えていると思いますが…、おそらく一番私がコーディングまずかったですね！笑
なんでもpotisionで指定してしまう癖と、全部CSSでなんとかしてやる…という無駄な気持ちもありトレーナーから逆にどうやって出来てるか不思議といわれたのでこれからは楽にできるところは楽にしようと思います…笑
中間課題からだいぶ日もたってたのでコーディングチェックは、「そういえばそうだった」の連続でした。

( ..)φメモメモ
・動きのあるイラストなどはpotision指定がいいが、そうでないならフレックスボックスでできないか一度考える
・重なりあうイラストを無理に一個ずつ場所指定する必要はない、思い切って一つの画像で用意しましょう。
・一番いいのはPCもSPもほぼ同じレイアウトであること！SPできえるとか、SP版で出てくる～とかはページが重くなるしSVGで代用できるものは代用しよう。
・デザインにおけるデザイナーの思いも重要だが、ユーザー側からの機能美も考えてデザインをする（SEOの観点も）

学びが深い～デザインって難しいけど面白いですね…！

06-卒制終わった～！

まだクライアントさんの方でサーバーは契約されてないので一時的に私のポートフォリオサイトの配下にのせています（画像や、文字やらは一部差し換えています。）元々お付き合いのあるクライアントさんなので、今後も勉強を続けて進化したりリニューアルさせていただければな…と勝手に考えております。二か月…はやかった…

▲　制作実績＠ポートフォリオサイト

※現在私のポートフォリオサイト配下に置いているため、一時的に個人情報含むものや写真などは差し換えています。

「卒制」という課題に関しては以上になります。次の記事は「WordPress」実装についてまとめています。上記に記載した通り、今回のクライアントさんは更新のあるサイトを希望しています。

なんてことを軽く勉強してた5月につぶやいてましたが…お前が更新性のあるサイトを作るんだよ！次回がっつりWordPress実装がんばったよ記事かきます。

また9/5にこのサイトの卒制発表も行って、色々なご意見をいただくかと思うのでアンケートをもとに少し修正もする予定です。（説明しながらやっぱりローディング画面の時間長いな…と思いましたし笑）

ここまでお読みいただきありがとうございました(^▽^)

おまけ- ロゴ制作について②

サイト制作と平行してロゴ制作もしてました。前回15案→4案にしぼったのでそれをデザインの段階であてはめていきました。

画像4

残った４つのロゴたち

サイトに合わせたときにやっぱり右上がいいな…となったのでこのロゴをブラッシュアップしていきました。

画像5

枠組みがイラストテイストなので中身はサイトと同じフォントを利用しカチっとさせました。最終的にフォント下のイラストも情報過多だな…となり取り外しました。

画像6

運営しているところとサイト名は別物なので最終的に２つ作り上げてロゴ制作は完了です！まず紅茶というテーマが面白いのでここから販売されてる紅茶のデザインなんかも出来れば…と勝手に考えてます…。また水彩画やろうかな～

次の記事

━━━━━━━━━━
ツイッター　@okomeohanausagi　
ポートフォリオサイト　https://kobayashimarika.jp/
━━━━━━━━━━


いいなと思ったら応援しよう！