新人編集者 稲津の守・破・離#01　ノンデザイナーが、「WHAT’S ON！」のサムネイルをつくるまで

しゅはり［守破離］〔武道・茶道で〕師匠の教える型を、はじめはまもり、やがて成長してやぶり、ついにはなれること。___三省堂国語辞典 第八版より

本企画は、雑誌やデザイン、Web等すべてにおいて未経験で入社した新人編集者・稲津が、編集長からの無茶振りに一所懸命応えていくさまを記録したものである。今回は、Webサイトに掲載するサムネイル制作編。ノンデザイナーである稲津がどのようにしてサムネイルを制作したのかを赤裸々に綴った。

話してくれた人

「稲津さん、サムネイルつくってみたら？」

いつだって、チャンスは唐突だ。

Webサイト公開まであと1週間。Webサイトの公開に向けて、編集作業の真っ只中。そんなタイミングで、サムネイルの制作を依頼された。雑誌とは異なり、Web記事にはサムネイルは付きもの。他部署のデザイナーに依頼する気満々だった私が口を開く前に、五十嵐編集長が言った。

　「稲津さん、サムネイルつくってみたら？」

来た。恒例となっている編集長の無茶振りだ。言っておくが、私は生粋のノンデザイナーである。InDesignもPhotoshopもIllustratorも入社してから初めて触った。もちろん、これまでデザイン業務を担当したことは一切ない。

ただ、こんなチャンスを掴まない手はない。私のいいところは、どんな無茶振りでも一度挑戦してみるところにある。無茶振りしがちな編集長との相性は、（残念なことに）抜群なのだ。

というわけで、私が編集担当している新規企画のサムネイルは、自分で制作することとなった。

インプットだけでデザインは上手くならない

ノンデザイナーとは言っても、私は、雑誌『Web Designing』2月号の特集「デザイン基礎講座」で30冊近くのデザイン書籍を読み漁った経験を持つ。さらに言えば、誌面のデザインラフを切ったり、デザイナーからのデザインをチェックしたりもしている。

「WHAT’S ON！」の記事用サムネイルの場合、すでに雑誌『Web Designing』掲載用のため、プロのデザイナーが制作した連載ロゴや、原稿執筆者の方の顔写真など、クオリティの高い素材が揃っている。

あとは“いい感じ”に配置するだけで、“いい感じ”のサムネイルができるだろう。そう高を括っていた私だが、その30分後には、痛い目を見ることとなった。

なんだこれは…と思ったことだろう。私もそう思う。ただ、当時の私の発想力では、このデザインしか生み出せなかった。

プロの知恵を「Pinterest」で探す

次の日。さすがにこのサムネイルを編集長に見せるわけにはいかない…と思った私は、プロの知恵を拝借することにした。プロの真似事から始めた方が早いことにようやく気づいたのだ。

早速、「Pinterest」を使ってサムネイルを検索。Pinterestは、誌面のレイアウトデザインを考える際に、情報収集として活用していたことから、自然と辿り着いた。

「サムネイル」のキーワードだけでは、YouTubeやWebセミナーなどのサンプルが中心となるため、スクロールしながらWebメディアのサムネイルのみをブックマークしていく。

しかし、Webメディアのサムネイルは、インタビュー現場や物撮りで撮影した写真をダイナミックに使っていることが多く、参考にしづらい。なぜなら、今回の「WHAT’S ON！ 拡張版」の素材は、タイトルロゴと提供していただいた顔写真のみだからだ。ダイナミックに顔写真を使うにしても、提供していただいた画像サイズに依存してしまうのが現状である。

また他にも、「& Premium」のWebメディアサイトでは、記事内の画像のみをサムネイルとして使用していることから、サムネイルとして別途デザインしているものを見つけるのは至難の業だ。

そこで、条件に近しいサムネイルの中でも、シンプルな構成かつ真似しやすそうなポイントを重点的に探ることにした。

Pinterestで収集していくと、Webメディアで使われるサムネイルデザインにある程度の傾向が見えてくる。例えば、「色枠で写真を囲む」「写真に文字をかぶせる」といった手法だ。

その中でも、mercari MAGAZINEの連載「好きなものと生きていく」のサムネイルにひときわ心を奪われた。

シンプルでありながら、今回のサムネイルの条件に合う。もっと言えば、ノンデザイナーの私にも真似ができそうだと思った。

褒められすぎて疑心暗鬼に陥る

目標が決まればあとは真似るだけ。早速、WordPressのサムネイルサイズである16:9で新規作成をする。

今回、Web DesingningのWebサイトを公開するタイミングで、雑誌『Web Designing』でも掲載されている「WHAT`S ON」と「WHAT`S ON +」のWeb版企画が始まることが決まっていた。そのため、「WHAT`S ON +」ではロゴカラーをそのまま活かしつつ、「WHAT`S ON」では「WHAT`S ON +」のロゴカラーを背景色に設定することで関連性を持たせた。

また、顔写真を大きく扱うことで、背景色が枠になるように工夫した。

「WHAT`S ON」#01は、株式会社トルクの本田一幸さんと堀江哲郎さんのお二人に選んでもらったため、左右に肩書とお名前を配置し、上下の文字を写真にまたがせることで、目標のサムネイルに近づけることができた。

こうして、なんとなく「それっぽい」ものが出来上がったため、このタイミングで五十嵐編集長にフィードバックを求めることに。

五十嵐編集長からは、「デザイナーがつくったみたい！」というあまりにも過剰な褒め言葉をいただいた。あまりの褒めように、私が事態を飲み込みきれず、「その褒め言葉、本心ですか？」と確認してしまうほど。入社してから1番褒められたかもしれない…。

五十嵐編集長からいただいたフィードバックを元に、Photoshopを再びこねくり回す。

フィードバック内容は次の通りだ。

　・タイトルロゴ下の文章は可読性を重視して削除する

　・Xでの投稿の際、記事タイトルが左下に入るため、左下への文字の配置をなるべく避ける

　・#️1の部分にあしらいを入れるといいかも

#1のあしらいをどうしようか悩んでいると、別部署の方が「反転色であしらいをつくるといいよ」とのアドバイスをしてくださった。そこで私は、生まれて初めて反転色の存在を知る。

フィードバックを反映させつつ、全体的に文字の級数を上げることで可読性を高めるように意識した。完成版はこちら。

これまで、雑誌の誌面やWebサイトのデザインは意識的に見ていたものの、サムネイルのデザインを意識したことはなかった。やはり、対象物ごとにデザインの特徴があるため、何事もプロの方々の制作物を参考にした方がいいのだなと学んだ。こうして、編集者としてのレベルがまた一つ、上がったのである。