Webデザインのワイヤーフレームを作る
Webデザイナーのチャーリー・マリー・プラングリーさんに、なぜデザインプロセスの最初のステップでワイヤーフレームを作成するのか、そしてなぜ見た目よりもスピードを重視するのかを伺いました。
「デザインは、アートとサイエンスが絶妙に融合したものです。私にとってWebデザインは、両方の持ち味を形にできる最高の存在です。高いUXデザイン思考力と問題解決力が必要であると同時に、美しくブランディングされた成果物を創り上げることが求められます。」
チャーリー・マリー・プラングリー: クリエイター向けのメールマーケティングソフトを制作する ConvertKit で、マーケティング・デザイン・リードを担当しています。またサイドプロジェクトとして、CharliMarieTV という YouTube チャンネルでデザイン関連の動画を制作して7年近くになります。あと Design Life というポッドキャストでも、デザインやサイドプロジェクトについて発信しています。最近はフォントデザインにも取り組んでいます。やりがいのあるサイドプロジェクトは楽しいですね！
今はスペインに住んでいます。暖かくて家賃の安いところに住みたくて (在宅勤務ですし)、去年ロンドンから移住したのですが、もともとはニュージーランド生まれです。ニュージーランドの首都ウェリントンにあるデザイン学校に通ったあと、印刷物向けのグラフィックデザイン業界でキャリアをスタートさせました。それから Xerog という地元のソフトウェア会社にマーケティングデザイナーとして転職して、テック業界に入りました。テック業界への転向は、私のキャリアで下した最高の決断だったと心底思っています。
趣味は旅行や新しいレストラン開拓、ポッドキャストを聴きながらの長い散歩です。最近はピアノも習い始めました。
デザイナーとしての仕事内容を教えてください。あなた自身とクライアントのために、デザインで実現しようとしていることは何ですか？
Webサイトとランディングページ制作が私の専門で、お気に入りのデザイン分野でもあります。デザインは、アートとサイエンスが絶妙に融合したものです。私にとってWebデザインは、両方の持ち味を形にできる最高の存在です。高いUXデザイン思考力と問題解決力が必要であると同時に、美しくブランディングされた成果物を創り上げることが求められます。
テック企業の社員なので、私のメインプロジェクトは自社のマーケティングWebサイトを常に改善することです。メッセージをより明確に伝え、自社サイトのコンバージョン率を上げる方法を常に探しています。定期的に (自社のターゲットオーディエンスである) クリエイターにヒアリングを行い、私のデザインに対する意見を聞いて改善点を学んでいます。
最近は、Webデザインにオーガニックな形を取り入れる試みをしています。サイトは長方形でできていますが、たまに流れるような線や不揃いな形があると新鮮ですよね。より人間味が感じられ、ConvertKitのブランドにぴったり合うんです。
アプリやお気に入りの媒体、素材など、使っているデザインツールを教えてください。どのようなデザイン手法が好みですか？
Figma は、あらゆる種類のデジタルデザインに最適なデザインツールですが、新規のWebプロジェクトを始めるときは、いつも最初に iPad に入れてあるコンセプトでワイヤーフレームを作成しています。また After Effects で動画などの素材作成、Photoshop で画像編集といったように、Adobe製品一式もときどき使います。でもサイドプロジェクトで主に使うのは Creative Cloud サブスクリプションで、動画編集には Premiere Pro、ポットキャストの録音には Audition を利用しています。
よくデザイナー同士でどのデザインツールが一番かを競い合ったりしますが、最高のツールは、自分が使い慣れた、アイデアを形にしやすいツールだと思います。最高のツールは、クリエイティブ作業を邪魔しないツールです。
デザイン制作でコンセプトをどのように使っていますか？アプリが業務にどう役立っているかを教えてください。
ワイヤーフレーム作成は、Webデザイン制作プロセスで最初のステップです。ここでは、ページ上の情報を配置するさまざまな方法について、アイデアを素早く出していきます。iPad と Apple Pencil を使う前は、紙とペンでワイヤーフレームを手書きしていました。今ではコンセプトが紙とペンの代わりです。無限大のキャンバスは、作業工程で大いに役立っています。枠をはみ出すことを気にせずどこまでも描けるし、ワイヤーフレーム全体を1箇所に保存できるのであとで参照しやすいです。
私の描いた絵は汚くて、たぶん他の人には解読不可能だと思います (笑)。でもこれはアイデアのたたき台なので、見た目よりもアイデアをとらえるスピードの方が重要なんです。ひらめきは、いきなり訪れるのと同じようにあっという間に消えてしまいます。なので、Webページの情報を配置するのに「これだ！」という名案を思いついたら、すぐさま（デジタルの）紙に書き留めることができないといけません。アイデア出しの段階で線をまっすぐ引こうとか、エレメントの間隔を完璧にしようとか考えていたら、すばらしいアイデアを見失いかねません。
アプリを活用する上で、共有したいコツやテクニックはありますか？お気に入りのツールやワークフローも教えてください。
私はおそらくコンセプトで使える機能の1%くらいしか使ってないと思います。定番の機能は、黒い等幅ブラシ (アナログのマーカーペンの代わり) と白い背景です。必要になれば他の色やブラシなどのオプションがあることは心強いですが、コンセプトは基本機能がとても充実しているのでありがたいですね。
コンセプトでワイヤーフレームを作成するみなさんへのアドバイスは、きれいに描く必要はないけれど、描いたものにはファイル名をつけて、ファイル管理は整然としておくことをお勧めします。白い背景に黒い長方形が描かれたファイルがどんどんたまっていくと、プロジェクトが見分けづらくなるので、その都度ファイル名をつけておくと後で助かりますよ。
クリエイティブな表現を共有したい他のデザイナーに対して、どんなアドバイスがありますか？
「どうせ自分なんて…」と自分を過小評価するインポスター症候群にとらわれないことと、まだ未熟だからという理由だけで共有をためらわないことです。私のコンテンツ作りの哲学は、自分の駆け出し時代にだれかが教えてくれればよかったのに、と思うことは発言するというものです。自分の数歩うしろを追いかけている後輩デザイナーは常に存在します。自らの経験を共有することで、彼らがそこから学ぶことができれば、あなたの存在は大きな助けになるでしょう。
クリエイティブ作業のプロセスは人それぞれです。みんなそれぞれ違うインスピレーションや経験を持っているので、シェアすればするほどインスピレーションの引き出しが増えていきます。だから、取り組んでいる作品はためらわず共有していきましょう。
チャーリーのワイヤーフレーム作成プロセスをもっと知りたい方は こちらの動画 をご覧ください。
チャーリー・マリー・プラングリー (Charli Marie Prangley): スペインのバレンシアを拠点にするWebデザイナー。各種サイドプロジェクトや、クリエイターの作品・プロセス改善支援を精力的に行なっている。マーケティングソフト会社 ConvertKit でマーケティング・デザイン・リードとして働くかたわら、YouTubeチャンネル CharliMarieTV とポッドキャスト Design Life で毎週コンテンツを配信。プロデザイナーとしてのライフスタイルを伝えるほか、デザインツールやデザインコンセプトに関するチュートリアルやアドバイスを提供中。
インタビュー: Erica Christensen
翻訳: Wakana Nozaki
おすすめ記事
Winning Concepts in Retail Design (英語) - リテールデザイナーのCharles Freestoneが、デザインコンペ受賞を勝ち取る作品づくり戦略を紹介します。
Vintage Design Elegance: Creating for Wine Decor (英語) - グラフィックデザイナーの Terrance Lam が刷新した Enrico Winery のワインラベル。その息を呑む美しさの制作過程をご覧ください。
The Art of Storyboarding (英語) - イラストレーターの Mimi Chao が、ストーリーボードがいかに Kickstarter のキャンペーン成功に貢献したかを語ります。
Working with Your Infinite Canvas (英語) - コンセプトの無限大のキャンバスなら、アイデアを広げ、好きなだけ描いて、必要なものだけ書き出せます。