概要

1年生の前期で学んだ知識を活かして制作した「本」がテーマのブログサイトです。初めてデザインからコーディングまでを一人で行った作品です。授業中にCMSの勉強をして、WordPressを使って更新ができる仕組みを作りました。カルーセルとハンバーガーメニューはjQueryで実装しています。

制作の流れ

デザイン

デザインはPhotoshopで制作しました。
ノートにワイヤーフレームのラフスケッチを描くところから始め、ロゴデザイン、サイト内のイラストなどのデザインも描いていきました。

今回のデザイン制作で意識した点は、「見やすい」「分かりやすい」デザインにすることです。
ブログサイトを調べていて、どのサイトも共通のポイントとして「読みやすさ」があると思いました。そのため、デザインの時点で行間などをしっかりと意識することを心掛けました。「本」というブログテーマも、読みやすいサイトという部分から着想を得てデザインに落とし込むようにしました。作りがシンプルになる分、デザインで個性が出せるように努力しました。

コーディング

授業で勉強してきたHTMLとCSSの他に、今回初めてWordPressを用いて制作をしました。夏休み明けの集中授業でWordPressを教えてもらい、実際に自分のサイトに組み込んでいきました。カルーセルにおすすめの記事を3件表示させられるという部分が、自分でネットで調べたり先生に質問したりして実装に時間がかかりました。

そして、ハンバーガーメニューやカルーセルといったサイトの動きの部分に関しては、jQueryを使用して実装しました。まだJavaScriptを授業で本格的に習う前だったので、ネットで調べながら実装したので苦労しました。

苦労した部分

上記でも少し触れましたが、カルーセルの実装とWordPressの実装が苦労した部分です。JavaScriptの知識がほとんど無い中でカルーセルを実装したので、ネットでたくさん実装例を調べたり、動きの微調整を何度も繰り返したりしながら作成しました。そして、WordPressは授業で教わりながら組み込んでいきましたが、自分のデザインが崩れないように作るのに苦労しました。しかし、この時の経験のおかげて、よりコーディングの力を磨こうと思えたので、自分にとってとても大切な作品になりました。

制作を通して

この作品制作を通して、ユーザー目線の使いやすい、わかりやすいサイトを作る大切さと、更新のために必要なCMSの基礎知識を学ぶことができました。完成後の講評会で先生から「一番読みやすいサイトだった」とお褒めいただきました。現在この課題を振り返ると、この後に制作した作品でも今回の学びがとても役に立っていると感じました。