おやつのひきだし「ワイヤーフレームの話②」
前回、どうせ特殊フレーバーは都会だけなんだろといじけた文章を書き散らしたら、後日なかおさんから「近所のスーパーに（パピコの）バナナキャラメリゼあったよ〜」と衝撃のコメントをもらいました。
調査不足ですみません。。新フレーバーのピスタチオが気になります。
※前回の記事はこちらから。
さて、本日のひきだしは予告どおり、ワイヤーフレームをどんな風にデザインに落とし込んだかの具体例をご紹介します。
本当はワイヤーフレームとデザインの間に手書きのラフがあるんですが、心の目で見てください ( ˘ω˘ )
目次
ワイヤーフレームとデザインのおいしい関係②事例編
全国空き家バンク推進機構（ZAB）様 webサイト
ZAB様は、国・自治体・企業のつなぎ役として活動し、空き資源（空き家・空き地・空きビル・空きスペース・廃校等）を利活用した地方創生・公民連携の推進を図られています。
その活動内容やノウハウなどを紹介するサイトの制作をとのことで、
「となると『ストーリー（＝事例紹介）』って一番の見せ場だよね？」
と思い、ワイヤーフレームよりもデザインボリュームをぐっと上げてドラマチックにしてみました。
また、物件や土地の紹介というよりもインタビュー形式になると伺ったので、より人物にフォーカスするレイアウトにしています。
一覧部分はシステムで表示させる＝記事ごとに細かな調整ができないので、都道府県名・市町村名の最大値・最小値が枠内に無理なく入るか、バランスは崩れないか、タイトルが長い時、お名前が長い時の見せ方はどうするか（全文出すのか、文末を丸めるのか）も、デザインするときにチェックしています。
ところで実はこのサイト、背景に地図のイラストを敷き、写真をおうち型で切り抜き、ドロップシャドウをかけ、かつ基本的に更新はクライアント側＝画像調整ができないということで、無自覚にweb的にかなり無茶なデザインにしてしまい、コーディングサイドが四苦八苦していて申し訳なかったです。
出来栄えはさすがの一言でした( ˘ω˘ )ｺﾞｲｽ…
余談ですが、先日、新プロジェクト「応援村 OUEN-MURA」様のwebサイトも制作させていただきました！
数量表現に行政ルールがあることを初めて知りましたよ。
公用文では、数詞に続けて物を数えるのに添える語として「箇」及び「か」を用いる。
「箇」は、複合の語として漢字若しくは漢数字に続く場合又は単独で「かしょ」と言う場合に、「か」は、漢数字又は算用数字に続く場合にそれぞれ用いる。
「個」は、新聞・放送など報道関係で「箇」に代えて用いられる語である。
「ヵ」・「ヶ」は、「個」とともに公用文での使用は不適切である。
大分県「大分ラグビー情報 Oita Rugby Information」webサイト
https://oitarugby.pref.oita.jp/
大分県ラグビーワールドカップ2019™ の情報サイトです。
※画像はティザーサイト時のもので、現在は本サイトになっています。
近いところでの同一内容の重複があまり好きではないのと、PCでみた時に試合日程を一画面で見せたかったので、日付などの英日どちらも同じ表現で通じそうな部分はスッキリとまとめて、横並びに変更しています。
※月日を逆に書く場合もあるようなのですが･･･( ˘ω˘；)
それと、翻訳サイトをご希望されていたのですが、ティザー時は日英どちらも一緒のページに載せる形だったので、読んでて余分な情報が入ってこないよう、チケット部分は言語ごとに左右に分けて配置しました。
ところで、試合の「◯ 対 ◯」を英語でいうときは「◯ v ◯」なんですね。
「vs」で慣れていたので、はじめはちょっと違和感がありました。
大分で初日のキックオフは10月2日！もうすぐですね！
ドラマ『ノーサイド・ゲーム』にも影響され、すでにテンアゲです。
ご来場される方はぜひ大分観光もお楽しみください。
トリアナ近辺のウマイもの情報はこちらから。
チケットの購入はこちらからどうぞ。
https://oitarugby.pref.oita.jp/rwc2019info/#content02
大分県「おおいた出会い応援事業」イベントフライヤー
最後にDTP案件をご紹介。
自分がそうなだけかもしれませんが、雑誌とかでもあまり文を読まないほうなので、ワイヤーフレームは「文章」になっていても、必要に応じて短いテキストに分割してアイコン化することがあります。
このチラシの表面も、ツナギの語句を省いて本当に言いたい部分を強調することで必要な情報がパッと目に入ってきやすいようにしてみました。
あと、参加者の方々にとっていい日になればいいなーという思いを込めて、ココ・シャネル様の名言を引用させていただいています。
先方希望で写真がイラストになりました。
メンズを描く機会があまりないので、社内蔵書の『アオハライド』で勉強をするなどしました( ˘ω˘ )φ”
裏面は、ワイヤーフレームのままのレイアウトだと一行が少し長い印象だったので、本文の枠を狭めにして、その分の余白をタイトルで埋めました。
文字サイズと文字数、行間・字間はWebのデザイン時もかなり気を遣います。
テキストバランスはターゲット層によるので絶対的な正解はないのですが、一文が長すぎても短すぎても、文字同士が広すぎても狭すぎても疲れてしまうので、「自分が気持ちいいところ」になるようにしています。
※タイミングよくデザイン面での文字組みのポイントをいくちゃんが分かりやすく解説してくれてたのでチェキラ！です。
なお、一行あたりの読みやすい文字数は一般的に35〜40文字程度と言われてるようです。
というわけで、この裏面のライティング部分の最大文字数を数えたら36文字でした。
特に意識したわけではないのですが、やっぱりそのあたりが「読んでて気持ちいい量」なんでしょうね。
ちなみに、このイベントの事務局であるトリアナの「ナコウド」は、運営開始から13年、1100回のイベント開催実績をもち、開催したイベントでは延べ5500組のカップルが誕生しています（2018年11月時点）
つまり、ナコウドが開催したイベントでは1回につき平均5組、毎年約420組を超えるカップルが誕生しているということ！
今回は地域限定ではありますが、大分県主催ということもあり、安心してご参加いただけます。
農林水産業に興味ある福岡女子のみなさま、送迎バス付です！
農林水産業に従事している大分男子のみなさま、培ってきた知識・技能はこの日のためです！（？）
お申込みはこちらから。締切は11/11までです（ポッキー＆プリッツの日！）
https://nakoud.jp/event/100
大分農業文化公園と言えば、学生時代に湖の白鳥ボートで爆走した思い出。。
個人的に「オリジナルのタレづくり」が気になっています( ˘ω,˘ )肉…
まとめ
今回は、自分の制作実績の中でも特にワイヤーフレームから大きく変えたケースをご紹介させていただきました。
毎回デザインをするときに、
ワイヤーフレームからレイアウトを変えてやる！絶対に！絶対にだ！(๑`ω´๑)
と思っているわけでは全くなく、基本的にはコンテンツの特性やユーザビリティの観点から「こっちのほうが良さそう」と思った場合に変更を提案するようにしています。
変える必要性を感じなければワイヤーフレームをそのまま踏襲することもモチロン多々あります。
「こっちのほうが今の気分だから」で変えることもままありますが( ˘ω˘ )ままっていうかわりと
ただ、こちらとしては変える気満々でも、様々な事情で「ワイヤーフレームの通りに作って欲しい」というオーダーの場合も往々にしてありますので、どこまでが許容範囲なのかをデザイン着手前や、必要に応じて制作途中にこまかくクライアント／ディレクターと話し合うようにしています。
いずれにしても、自分も楽しみつつ、クライアントやディレクターの予想をいい意味で裏切れたら嬉しいですね。
§
話は少しズレますが、昔、かけだしもかけだし、右も左も分からないミジンコのような時分に「文字面ではなく、内容を把握してデザインしなさい」と言われたことがあります。
無意味にゴテゴテと飾り立てるのではなく、制作物のコンセプトや制作目的、対象者、ゴールなど素材の中身をきちんと理解しなさいということですね。
「デザイン」というと、ややもすれば「＝装飾」と思われがちなんですが、wikipediaには下記のように書かれています。
デザインとは具体的な問題を解き明かすために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。
つまり、デザインとはあくまでも「問題の解決」が主目的であって、パーツの装飾や見栄えは機能性やコンセプト、ゴールを追求した結果というわけです。
ミジンコの頃はもらったものを何も考えずにそのままコピペするだけでしたが、今はコンセプト的に漢字はひらくべきかとじるべきか、英数字にするか漢数字にするか、表記のゆれはないかなども細かくチェックするように心がけています。
文章の行間や字間だったり、余白だったり、要素の大きさだったり、ともすれば注意も払われないような部分にもコンセプトは現れるので、デザインするときは充分に検討していきたいところです。
※「漢字をひらくとかとじるとかって何？？」という方はこちらをどうぞ。
私自身は、その媒体がもつ雰囲気や読みやすさで選ぶようにしています。
そういえば、10年以上前のものですが、Microsoft社がiPodのパッケージをリデザインしたらどうなるか？というパロディ動画が大好きだったのでご紹介します。
多少悪意は感じますが（笑）、どちらが良い悪いではなく、どういう方針で作るかによってデザインはこんなに変わるんだ！という意味で興味深いので、よかったらご覧になってください。
§
ワイヤーフレームの話からそれ過ぎましたね。
長くなったので今日のおやつはまた次回。
ミスドのハロウィンパーティーが某イカっぽくて気になっています( ˘ω˘ )
それではまた。
関連記事
記事を書いた人
トリアナのおやつ係です。
トリアナのおやつ係です。