技術ブログ制作秘話(デザイン編)
今回はデザイナーとしてこの技術ブログの制作秘話をご紹介したいと思います。
【今回の登場人物】
私：この記事買いてる人＋研修としてこのサイト作った人
きょんさん：私の研修を全部面倒見てくださってる先輩デザイナー
始まり
私(今年3月にアンテクに入社)を含め、アンテクに勤めている人たちが学んだことをアウトプットできる場所があるといいよね、というのが最初の話。
そうなればアンテクの活動を外に知ってもらうためにも、アンテクの技術ブログを立ち上げよう！となり、開発に至りました。
【目標】
- アンテクのコーポレートサイトと同じような雰囲気のサイトにする
- 研修課題としてWPを使ったブログ開発
- デザイン〜構築〜リリースまでを通して流れを覚える
聞き込み＆調査
まずはサイトを作る上で一番大事な情報調査。他の会社のブログサイトや、メディアサイトなどをいくつかピックアップして今回のサイトで使用する要素や情報を洗い出します。
【使う要素】
メインビジュアル/日付/カテゴリ/執筆者/アイキャッチ/目次/見出し1~4/引用/リスト/順序リスト/定義リスト/リンク/コードエリア/記事内ページネーション/一覧ページネーション/シェアボタン/メンバー/タグ
それと同時にピックアップしたサイトの中からどのサイトが一番イメージに近いかなどを、私と監修のきょんさんで直接話し合ったりしてデザインイメージをすり合わせていきます。
ワイヤー
使用する要素や情報がまとまったら今度は構成にうつります。
私の場合、ワイヤーフレームを作成するにあたってはAdobeさんのPhotoshop・Illustlator・XDのいずれかで行っています。
ただし制作する際に相手から「サイトの動きも同時に確認したい」と言われた際は、リンクやレスポンシブ等の動きが検証できるXDに絞って作成しています。まだ使い方慣れませんが。
今回は特にそういった指定はなくやりやすいやり方でも良い、ということでしたのでお言葉に甘えてPhotoshopで作成しました。(そのままカンプデザインに移りやすいかなと思った結果のツール選定)
作ったワイヤーはこんな感じです。
ここでひとつ、大事なこととして言われたのは「このワイヤーはデザインしたデザイナーにとってどういう意味合いで作られたワイヤーなのか。」
ワイヤーの意味としては大まかに２通りに分けて
- 構成要素の配置がメインでブロックごとの細かいデザインはカンプ作成時に行うワイヤー(カンプの時に大きく見た目が変わる)
- 最初から構成要素の配置と大まかなデザインまで想定し、カンプ作成時には画像や色を入れ込む作業になるワイヤー(カンプの作成時にあまり見た目がかわらない)
どちらにもそれぞれメリットがありますが、上記を理解した上で自分がどちらの意味合いで作ったワイヤーなのかをしっかり言えないと、実際クライアントさんと意思疎通のトラブルが起きてしまいます。
例えば、デザイナーは後者のつもりでワイヤーを作成し、クライアントは前者のつもりのワイヤーだと思いワイヤーを通した場合、デザインカンプを見せた時に「ワイヤーからあまり見た目が変わっていない、手を抜いてる」「ワイヤーの見た目からあまり変わらないと思わなかった。イメージと違うからやり直して」ということになってしまったり。
相手の意思をきちんと汲み取り、それに対する自分の考えを伝えるためにも、ワイヤーをお見せした時点でしっかりそのことが説明できるようになることがベストだと今回学びました。
ちなみに私は今回は後者としてワイヤーを作成しております。
最初のデザインカンプ
上で話した通り今回は予めデザインに近い形でワイヤーを作っていたのでカンプでは画像や色を主に乗せその他バランスに合わせて調整を加えていく作業。ですが中々デザインがうまく決まらず修正続き。
反省含めて最初に作った一覧の画面
- 背景の白と文字の乗っている白のエリアの境界曖昧
- カテゴリを表示する黒帯のリボンの文字が遠くから読みづらい
最初の記事画面
- テーブルのデザインが子供っぽい、雑
- 定義リスト使いずらい
- サイト内に無闇に仕様色合い増やすのよくない
- リスト、技術記事内で使うにはくどい
と、その他諸々の修正が入り最終的に私が作ったデザインカンプがこちら。
トップページと記事一覧でヘッダーのデザインが違うのは、ヘッダーのデザイン案が特に通らなかった為、２案出してどちらがいいか聞いた時に使いました。
しかし、それでも中々デザインは通らず…。
自分の中でも何か画面がごちゃごちゃしている気がする、でもわからない。というモヤモヤを抱えて苦しんでいるところ、きょんさんから「わたしがちょっと直してみてもいい？」と声をかけてくれました。
きょんさんによるブラッシュアップ
リアル赤ペン先生だ！と嬉しく思ったのと同時に、自分以外のデザイナーさん(しかもベテランの人)が同じテーマや構成でどうやってデザインするのかこれが一番勉強になるのでは？とチャンスに思い、是非お願いします。と頼んでみました。
そういった経緯できょんさんに直してもらったデザインカンプがこちら。
第一印象は「あれ、思ったよりシンプルだ？！」と思いました。
それと同時に「これ、サイトイメージの聞き込みと理解自体そもそも足りて無かったな…」とも感じました。
デザインカンプを作るにあたって私のイメージはシンプルだけどもうちょっとポップ寄りだと思ってデザインしていたのでいくらデザインを直してもこういったデザインにはならなかったわけです。
根本に
・技術ブログサイトであること
・アンテクのコーポレートサイトとあまり差異を感じさせないもの
をしっかり持ったデザインが出来ていなかった。
他にもデザイン初心者あるあるの原因で
- シンプル＝手抜きっぽいデザインになってしまう。リッチにならない
- 意識的にセオリーなデザインから外れようとする
- ジャンプ率や余白のバランスが雑
だったことにより、まとまらずかっこ悪いデザインになってしまっていた。
つまり、きょんさんの直しの綺麗なデザインは
- 技術ブログであることを意識し、尚且つ会社サイトから流用できるデザインは合わせて使う
- シンプルはリッチな感じに仕立てる
- ジャンプ率や余白、繰り返し配置が規則的で綺麗
- サイトデザインのセオリーから無理に外れようとしない
これらが全て出来ているからデザインがしっかりしているんだと改めて認識しました。
まとめ
と、言うようなことが色々あり。この技術ブログのデザインは制作されました。
今回学んだことはとても多く、大きく、自分の中でもこれからデザインをやっていく上で凄く勉強になった経験だと噛み締めました。
特に初歩的なことかもしれませんが、
- サイトで伝えることの根本を意識し続ける
- サイトイメージの聞き込みを細かく行う
を大事にしてデザインすることを今後もっと大切にして行きたいと思います。
ちなみにこのデザインの後、コーディングは自分で行った上でWPの組み込みは先輩マークアップエンジニアの方に手伝ってもらって最後リリースまで行いました。
また今度は制作秘話WP組み込み編の記事をいつか続きで書けたらと思います。
(php書けなさすぎて地獄だったのでさすがにもう少しWP慣れてから書きに来ますね)
