Inside cmn!

河瀬 未祐

“足りてる”Webワイヤーフレームを作って、無駄を減らそう

UI/UXコミュニケーション設計

Webサイト制作にかかせないワイヤーフレームの作成作業。クライアントへの提案に利用したり、デザイン作業の下地となる、設計図の役割を担っています。

今回は、“足りてる”ワイヤーフレーム(以下ワイヤー)を作りましょうというお話をしたいと思います。
“足りてる”とどんなメリットがあるか。また、普段フロントエンドをやったり、ワイヤーを書いたりしている目線で見て“足りてる”ワイヤーとは?解説していきます!

足りてるワイヤーを作る重要性

足りる=不足が無い。
結論から行くと、「パーツ抜けがなく、そこに何が入るかが理解できるワイヤー」のことを、“足りてる”ワイヤー と表現しています。

足りてないとどうなる?

例えばページネーションや、開く・閉じるみたいなちょっとしたボタン。
もし抜けていても、最低限のものはデザイナーやエンジニアがデザイン・テスト操作時に気がついて、リカバリーできます。
ですが、デザイナー・エンジニアに「なんか違和感?あ、ボタンなくない?」と、違和感に気が付く→考える時間が発生してしまいます。

そして、

「ここ多分ページネーション要りますよね?[View more]ボタンで下に増える方がいいですか?」
「あ、本当だ…すみません、ページネーションです!対応お願いします!」

あるいは

「ページネーション入れておきました!デザイン確認お願いします」
「抜けてました…!デザインOKです!ご対応ありがとうございます!」

のようなやり取りが発生するかも……。これが積み重なるとタイムロスにつながります。
更に、違和感に気がついて考える作業で、デザイン・コーディング作業の集中が切れる可能性も。

エンジニアの私としては、
ここ足りないな……となった時に
1.機能が必要か不明なので、ディレクターに相談する
2.機能が必要なのは間違いないがデザインが欲しいので、デザイナーに相談する
3.一旦よしなに対応して後でディレクター・デザイナーに報告する
4.今はそれどころではないので一旦置いておく
の選択肢が頭に出る時点でちょっと煩わしいのです。

足りてないと、良いことがありません!

足りてない例。インタビューなのに、プロフィールがないまま本文が始まっています。 デザイナーは、「導入文で触れてプロフィール自体は下の方に入れるのか?」「導入文のすぐ下にプロフィールを入れるか?」を考えることになります。

逆に足りてたら?

逆に、です。
・ページネーションが入っている
・「更新頻度が低いのでページネーション不要」と一言書いてある
そのような不足のないワイヤーがある状態で、デザイナーやエンジニアに「考える瞬間」が発生すれば、

「絵でサクサク見せる感じなので、ページネーションやめてスクロールに応じて自動で記事が増えるようにした方がいい気がしませんか?」や、
「更新頻度低いって聞いたので、リスト自体も大きく見せる感じにしました!」

みたいな、ワイヤーを発展・飛躍させる余白が生まれるかも。こっちが積み重なっていけば、より良いサイトになっていきますね。
例えばゲームでは、初期性能が高い武器を強化した方が、最終的な性能も高くなることが多いです。
私はWeb制作も同じだと考えていて、ベース(=ワイヤー、設計図)の精度が、デザインや実装を経た最終的な仕上がりに影響すると考えています。

だから“足りてる”ワイヤーを作りましょう!

パーツを洗い出そう

パーツ抜けなく作るためには、過分に用意してから削るのが安心です。お役立ちtipsとして、汎用的なページのよくあるパーツを洗い出します!
記事系一覧/詳細、お問い合わせの3種類です。ワイヤー制作時のお供にどうぞ。
*ページ見出し、ヘッダーなどの共通パーツは除外します

パーツ例:記事系ページ 一覧

記事リスト部分:
1.サムネイル
2.日付
3.カテゴリー・タグ
4.タイトル
5.view moreや矢印(遷移示唆)

サブ要素:
6.ALL+各カテゴリー・タグのリスト
7.ALL+投稿年月日のリスト
8.記事件数
9.ページネーション(遷移)or View more(その場で増える)
10.表示中のカテゴリ・タグの名前(絞り込み時)
11.シェアボタン
12.お気に入りボタン

パーツ例:記事系ページ 詳細

記事本体:
1.サムネイル
2.日付
3.カテゴリー・タグ
4.タイトル
5.導入文
6.目次
7.本文
8.取材相手及びライターの情報(写真/会社・店舗名/役職/氏名/プロフィール)
9.筆者の情報(写真/会社・店舗名/役職/氏名/プロフィール)

サブ要素:
10.別の記事(関連、おすすめ、新着(カテゴリ別、タグ別等))
11.シェア・URLコピーボタン
12.前へ・次へボタン
13.一覧に戻るボタン
14.カテゴリー・タグリスト

パーツ例:お問い合わせページ

1.概要文(取材は以下のフォームから〜etc)
2.FAQ
3.別ページ導線(資料請求、別のフォーム、FAQなど)
4.注意書き、電話や営業時間の案内
5.フォーム
6.プライバシーポリシーに同意する
7.送信する

どうですか?意外と多いな…と思うかもしれません。
ただ、全ての要素が必ず必要な訳ではありません(逆に、ここにない要素が必要な場合もありますね)。

例えば、飲食店の「お知らせ」のページ。
季節のメニューを掲載したい場合にサムネイルのない(用途に対して足りてない)ワイヤーを作り、デザイナーやエンジニアもそのまま組み立てたら、折角の料理写真が一覧に表示されず、クリック率に影響が出そうですね。
逆に、営業時間変更や休業日のお知らせしかしないのにサムネイルを設けると、noimage画像が並んで煩わしくなるでしょう。

もしディレクターがワイヤー時点で立ち止まり、「お知らせには何を載せるんだろう?」と思い至れば、クライアントに確認→ワイヤーに反映することができます。
足りてるワイヤーを目指すことは、確認できていない情報の把握・ヒアリングにも役立ちますね。

何が入るかを示唆しよう

「そこに何が入るか」を不足なく伝えるには、パーツに入るテキストの文言やサイズ・太さも重要です。例えば、メディア記事の本文テキスト。

 


テキストが入ります。テキストが入ります。テキストが入ります。

見出しが入ります

テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。


 

↑これだと何が入るかデザイナーは解像度を上げられません。一方で、

 


導入文が入ります。この人にこんな話を伺いましたという文が入ります。

─質問見出しが入ります。質問見出しが入ります。質問見出しが入ります?

山田:テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。


 

このようにしてあれば、すぐに「見出しがインタビュアーの質問になるタイプのインタビューの記事だ」と理解ができ、デザイナーは近い記事の、見せ方の参考を探しに行くことができます。
テキストではなく、参考サイトのスクショを貼るなどでもOK。方法問わず、イメージを伝えることが大事です。

まとめ

ワイヤー制作で必要な作業は、「何のセクションをどの順番で並べるか」だけではありません。
・そのセクションを構成し得るパーツを洗い出し、サイトの目的/ページの役割や用途/ターゲット層を鑑みながらどのパーツを採用すべきかの取捨選択をする
・どのような情報を伝えたいかがデザイナーに伝わるように表現を工夫する
これらの作業の積み重ねが必要です。十分に行えば、“足りてる”といえるでしょう。

そして、デザイン段階でもワイヤー時点での選択が最適かの確認を行い、調整する。さらに、コーディング段階で体験面(操作/情報取得)へのストレスがないかも確認を行う。
この一連の流れが、不足がなく、見せ方にもこだわった良いWebサイトに繋がっていきます。
時間はかかりますが、“足りてる”ワイヤーを作りましょう!

弊社の実際のWeb事例については、こちらからご覧ください。

impl

札幌市児童会館

 

Written by

河瀬 未祐 Miyu Kawase

front-end engineer

札幌市出身。2017年に北海道芸術デザイン専門学校を卒業後、Web制作会社に入社しWebデザイン及びコーディングを担当。2019年にフロントエンドエンジニアとしてcommonoに入社。

Q1. commonoに参加した理由
入社前に一緒にお仕事をさせていただいたご縁から。
求められる技術レベルが高く、自己成長に繋がると思い入社を決めました。
Q2. わたしの偏愛
カメラと旅行です。たくさん予定が詰まった旅程を立てること・旅先の思い出を写真に収めることが好きです。
Q3. 今後commonoというフィールドでやりたいこと
きちんとコンバージョンに繋がる・ユーザーによい体験を与えるだけでなく、技術者の視点から見ても参考になるようなWebサイトを構築し、北海道のクリエイティブの価値向上に貢献していきたいです。

お問い合わせ

    個人情報利用目的への同意

    ※このサイトはCloudflare Turnstileよって保護されています。
    ※お客様が入力した個人情報はSSL暗号化信号によって保護されています。

    個人情報の利用目的
    このお問い合わせフォームでご提供いただく個人情報は、お問合せ等に対する回答や資料送付、その他ご連絡のために利用します。
    当個人情報を第三者に提供することはありません。
    当個人情報の取扱いを委託することはありません。
    必要事項を全てご入力下さい。入力内容に不備がある場合は、ご返信しかねる場合がございます。
    内容により、お時間をいただく場合がございます。
    当個人情報の利用目的の通知、開示、内容の訂正・追加または削除、利用の停止・消去および第三者への提供の停止(「開示等」といいます。)を受け付けております。
    開示等の求めは、info@commono.co.jpで受け付けます。
    統計ツールやクッキー、ウェブビーコン等を用いてご利用状況を調査していますが、これによる個人情報の取得、利用は行っておりません。
    当社の個人情報保護に対する取り組みは「Privacy Policy」を必ずご確認ください。

    COMMONO株式会社
    E-mail:info@commono.co.jp
    個人情報保護方針、個人情報の取扱いについて
    PRIVACY POLICY

    現在準備中です

    お気に入り

    お気に入りから削除

    選択したアイテムをお気に入りから削除しますか?