01. 基本情報
制作期間：50日
担当範囲：すべて
使用ソフト・技術：
HTML / CSS /JavaScript / jQuery / PHP / Illustrator / Photoshop / Visual Studio Code /WordPress
URL：https://zumiino.org/blog/
02. コンセプト
入学して専門的に学び始めてから2ヶ月。
1年生前期の集大成として、初めて一からデザイン、コーディング、WordPressを使用してCMS構築まで行いました。
自分らしさを出しつつ、見やすいブログサイトになるように制作をしました。
03. 制作過程
03-1. アイデア出し、ワイヤーフレーム作成
まず初めに、どんな項目をどの場所に入れるかの構成や、どんなデザインにするかをワイヤーフレームに書き出しました。
自分の好きを詰め込んだデザインにしたかったので、全体的にイラストを多く使用し、飼っている愛犬をモデルにしたキャラクターもあちこちに配置することにしました。
03-2. イラスト作成
次に、使用するイラストを描き、Illustratorでトレースをして着色しました。
手描きの柔らかい雰囲気をそのまま表現したかったので、線をそのまま描くのではなく、線自体を囲んでから内側に色をつける方法でトレースをしました。
03-3. Photoshopでデザイン作成
使う素材の準備が完了したら、デザイン作成に取り掛かりました。
色は見やすさ、読みやすさの質を落とさないように、主張をしすぎない配色にし、Webサイト全体が絵本のような温もりのある印象になるようこだわりました。
03-4. コーディング
デザインが完成したら、コーディングに取り掛かりました。
デザイン通りにコーディングすることが難しかったです。
特に、記事一覧全体を囲っている家の背景を、屋根・壁面・玄関などの下の部分に3分割し、それを上手く繋がっているように見えるようにコードを書くことに苦戦しました。
03-5. CMS構築
最後に、WordPressでブログのテーマを作成し、導入しました。
CMS の仕組みとサーバー、データベースの役割を理解するために、ローカル環境の構築から、テンプレートタグの設置までを一通り行いました。
難しく、わからないことも多かったですが、自分で調べたり、それでも分からなかったときは先生に質問をしたりして、形にすることができました。
05. 完成作品
作品URL：https://zumiino.org/blog/
06. まとめ
初めて一からWebサイトを制作し、新しい知識・技術を多く学ぶことができました。
最初から最後まで楽しみながら制作することができました。
自分らしいオリジナルブログサイトになったと思います。
これからまた新しい知識も学んでいくと思うので、より良くなるよう修正もしていこうと思います。