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

2024年7月18日

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

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

話してくれた人

稲津梨沙

Web Designing編集部の新人編集者。雑誌やデザイン、Web等すべてにおいて未経験にもかかわらず、なぜか採用された。趣味はボディビル観戦。

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

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

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

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

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

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

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

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

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

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

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

「WHAT’S ON！拡張版」の初回デザイン。あまりの出来の悪さにその日は誰にも見せずに帰宅した

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

プロの知恵を「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は、株式会社トルクの本田一幸さんと堀江哲郎さんのお二人に選んでもらったため、左右に肩書とお名前を配置し、上下の文字を写真にまたがせることで、目標のサムネイルに近づけることができた。

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