本プロジェクトの3つの目標

1. 記事の更新を早くするためにWordPressで実装する
2. サイト全体で10000PVを目指す
3. 2020年までに100記事更新を目指す

ペルソナ

プログラミングとデザインの2つの大きなコンテンツに合わせて、ペルソナをそれぞれ設定し、ユーザーの「悩み」や「課題」を明確にしていきました。

また、ペルソナを基にカスタマージャーニーマップを作成して、ユーザーの行動の全体像を可視化して、サイトでの体験をどうすればいいのかを検討しました。

コンセプト

競合サイトの現状を分析を行い、ターゲットを考慮して「どのポジションで発信するべきか」を考えた結果、以下のコンセプトを設定しました。

クリエイティブ初学者に2人のクリエイター男子のリアルなストーリーを届け、 再現性のあるノウハウを一緒に楽しく学べる “Creative Webマガジン”

記事の読みやすさにこだわったデザイン

マガジンのようなお洒落なトンマナで、記事をサクサク読めるデザインを目指し、他のブログサイトとの差別化を図りました。

全体的にモノトーンを基調にして「サムネイルを映えさせる」ことで、記事を読みに来た人に一度読んだ記事を覚えやすい見た目にしました。

スタイルガイド

スタイルガイドを作成して、サイトの全体の雰囲気とデザインに一貫性を持たせました。

モーショングラフィックに挑戦

Topページに記事を用意した方が何度も見る方には良いのですが、他のサイトとの違いを出すためにKVにモーショングラフィックを使用することを検討しました。

記事の冒頭にまとめを配置

多くのWeb記事では記事の最後にまとめを配置することが多いのですが、できるだけ多くの人の悩みを早く解決したい想いから「記事の冒頭にまとめ」を配置することにしました。

ローンチ当初に読者から高評価を得ることができ、離脱率が多くなる方法だと思いますがファンを増やす取り組みを続けました。

コーディング

デザインが完成しても修正が発生することを見越して、CSS変数を活用して「コンポーネントされているUIを共通のコード」で作成していきました。

このひと工夫によってCSSを書き換えるだけで、全てのページの修正を反映することができる状態にして、効率を重視しながらコーディングを進めていきました。また、WordPressへの移行は友人が作業を進めてくださり、自分ができない部分を補ってくれました。

SNSの運用

Twitterでは「新着記事の告知」などをメインに発信し、Instagramでは「簡単なまとめ」を発信していきました。また、Instagramの図解はマガジンで使用しているサムネイルから流用するようにして、Web記事との一貫性に注意しながらデザインしました。

全工程を2人で制作

普段の仕事では任されない「企画・設計フェーズ」についても、不慣れながら友人と議論して進めていきました。プライベートワークとはいえ、全ての制作フェーズに関わりスキルアップすることができたと思います。

本プロジェクトでは、なるべく一人で制作を進めることが無いように、週に1度は必ず定例MTGを行いました。お互い納得するまで話し合いを行い、2人の認識を合わせながら進めることができたと思います。

100記事更新達成！

「デザイン、プログラミング、ツール」などのカテゴリーに分けて、2人で合計100記事を執筆して目標の一つを達成しました。

ライターでは無いですが記事を書くことで、デザイン以外の知識を身につけることができました。また、サムネイルや記事内の図解も全て1つ1つデザインしたため、合計100個以上のグラフィックをデザインしました。

Credit

Creative Direction：折田 浩一, 西山 将平
Project Management：西山 将平
Designer：西山 将平
Front-end engineer：折田 浩一, 西山 将平
Writer：折田 浩一, 西山 将平