2024.10.01
自社の社内情報を未来の“ゴミ”にしないための備え 「情報量が多すぎる」時代がもたらす課題とは?
リンクをコピー
記事をブックマーク
あらかじめメールとかでもご案内していたとおり、今回は日本語のXDのワイヤーフレームキットであるWires jpを使用します。すでにダウンロード済みの方は手元で実際に開きながら進めていけたらいいかなと思っています。
念のためWires jpのダウンロードするアドレスをこれからたぶんコメントのほうで流してもらえると思うので……こういうページですね。「Wires-jp」というダウンロードページがあるので、ここからUIキットをダウンロードしてみてください。
実際ダウンロードするとZIPファイルになっているので、それを解凍して開くと、こんな感じのXDファイルになっているのではないかなと思います。
Wires jpは、Webサイトやアプリでの使用頻度の高いパーツ群をまとめた、日本語のワイヤーフレームキットです。これだと、架空の「株式会社XD」となっていますけれども、この会社のコーポレートサイトですかね、よくあるパターンをまとめたアートボードがいくつか入っていたり、あとはこういうふうにカラーパレットとかアイコンセットだとか、タイポグラフィみたいな、さきほどの説明で言うとスタイルガイドに当たるような部分も含まれています。
単なるパーツの集合体ではなく、デザインシステムの親和性を高めるために、こういうものと、それからXDのアセット機能を使ってちょっと手を動かしていきたいと思います。
これから、あるWebページを、このWires jpを使って手元でどこまで再現できるかなというのをやってみたいと思います。
これから進める前に、1つ便利なプラグインを入れておきたいと思います。「プラグインを見つける」で、XDの公式のプラグインのページから検索で、アルファベットで「Mimic」と入力して検索してみてください。すると1つ「Mimic」というプラグインが見つかると思いますので、これをインストールしてみましょう。
僕の場合Windowsなので、Macの方は見た目が若干違うかもしれませんが、プラグインの中から「プラグインを見つける」。Macの方は上のメニューからいけますかね。
インストールはすぐに終わるので、インストールができたらこのプラグインの欄に「Mimic」というプラグインが入っているかどうか見てみてください。大丈夫そうでしょうか。
では画面を切り替えて、Webページを見ます。今日お題として手元で再現するページは、みなさんご存じ、PlayStationの公式ページです。ブラウザで「PlayStation」と検索したらたぶん一番上に出てくると思います。PlayStationの日本の公式サイトのトップページ、これをXDで軽く再現してみたいと思います。
まずこのURLをコピーします。そのついでにどんなページかをザッと見ておきましょうか。「だいたいどんな色が使われているかな」とか「どんなレイアウトかな」とか、さきほどのデザインシステムで言うと「デザインの概念・原則どんなものなのかな」みたいな思いを馳せながら見ていただくとよいかなと思います。角ばっているのか丸っこいのか、すっきりしているのか派手なのか。どうですかね。だいたいこんな感じでいろいろないくつかの色も使われているかと思います。
というところで、もう1回、URLをコピーしたら、XDに戻りましょう。では、先ほどインストールしていただいたMimicというプラグインを起動します。するとウィンドウが出てきて、URLを入れる入力ボックスが1個あるので、ここにさっきコピーしたPlayStationのページのURLを貼りつけます。
Mimicは、指定したページのカラーと文字スタイル、あとイメージを抽出してくれるプラグインです。「抽出」というボタンがあるのでこの「抽出」を押すと、こんな感じでフォントとそのページで使われているカラーと画像が抽出されました。出てきましたかね。大丈夫でしょうか。
ではこれを材料として、Wires jpと組み合わせてどこまでさきほどのPlayStationのページが再現できるかを見ていきたいと思います。
ただもちろん、このWires jpはWebサイトによくある要素がまとまっているとはいえ、当然ですが、このままだとPlayStationのサイトにはしっくり来ないんじゃないかと思います。さきほどご説明したデザインシステム三天王であるデザイン概念・原則、それからスタイルガイド、コンポーネントライブラリ、もちろん全部違いますからね。
そこでじゃあ何をどうやっていこうかというところですが、まずは先ほど抽出した色の中から見ていきましょうか。Webページにはこれだけの色がザッと使われていたということですね。この中にはおそらくPlayStationのページのキーとなるブランドカラーに近しいものが入っています。どれだかわかりますでしょうか?
PlayStationのブランドカラーは「PlayStation Blue」とも呼ばれる青です。この中だと、これとか、ちょっと濃淡が種類あるのでこういうものも青の仲間ですね。この青が基本のボタンとかにも使われている青です。
ちなみに、今、PlayStationのブランドカラーが青と言いましたけれども、PlayStation Blueというものが定義されたのは実はPS4に入ってからということなので、実は意外と新しいんですよね。
ちなみに、初代のPlayStationからPS2・PS3と全部持っていた方はこの中にどのぐらいおられますかね。「持っていたよ」という方はあとでコメント書いておいてください。古くからのPlayStationユーザーの方だったら、「そういえば、PlayStation初代とか2とか3とかあんまり青っていう記憶がないな」って思いますよね。PlayStation Blueは最近のことというのも今日の豆知識ですね。
まずブランドカラーの1つが青ということがわかりました。これをキーカラーとして設定しましょう。XDのアセットパネルはカラーと文字スタイル、そしてコンポーネントがありますが、その中のカラーを見てみましょう。これにはすでにWires jpが持っているカラーがいくつか登録されています。
この中に「Primary」という名前がついたカラーがあると思います。実はこのWires jpのPrimaryカラーも青なのであんまり差がなくて申しわけないんですけれども、このPrimaryカラーを変更していきます。あっ、その前に先ほどのPlayStation Blueのこの青を選択して、プロパティパネルからHexの数値をあらかじめコピーしておきましょう。
アセットの「カラー」の「Primary」を選択して、右クリックで「編集」を選択します。アセットパネルの「カラー」は、もちろんページの中でよく使うものをカラーピッカーとして使える機能なんですけれども、それだけではなく、あとからそのカラーを編集することで、このように、ページの中に置かれた同じ色、それらを全部まとめて変えられます。これって初期からある基本機能なんですけれどもね。
ではこのPrimaryの色を、先ほどコピーしたPlayStation Blueの青の数値を貼りつけて、Enter。これでPrimaryカラーがPlayStationのサイトと同じになりました。同じ青で若干変わったというところなので、まだあんまり差がないかなと思います。
ではついでにもう1個。抽出したカラーの中にオレンジがあります。Webページの中にオレンジも印象的なところで使われていたりするので、このオレンジも登録しておこうかなと思います。
新しく追加するときは、このオレンジを選択して、アセットパネルの「カラー」のプラスアイコンをタップします。はい、新しくこのオレンジが追加されました。
カラーを追加したとき、デフォルトではこのようにHexの値がついているだけなので、パッと見どこで使われている色なのか、何の色かわかりづらいので、名前を変えておきましょう。このオレンジを右クリックすると「名前を変更」というメニューがあります。ここではPrimaryに合わせて「Secondary」としておきましょう。Secondaryカラーです。
このように、ただカラーに色を登録するだけではなくて、名前をつけてやること。これはほかの文字スタイルとかも一緒なんですけれども、デザイントークンとも呼ばれる手法で、単なる数値としての連なりではなくて他人と共有できる呼び名にすることで、生産性を上げられます。
例えばこれが全部Hexの数字のままだったら、「あのグレーをちょっと濃くしよう」とか言われたときに「どのグレーよ?」みたいな話になるので、ここだと「Blue gray」とか「Light gray」とか名前がついていますね。そのほかには「Gray 400」とか「Gray 200」とか、数字と組み合わせて名前をつけるパターンなんかもあったりします。
ちなみに僕の場合は、後々自分でコーディングすることを想定して、Sassの記法とかCSSの記法に合わせて、変数名と同じものをあらかじめつけたりすることもあります。
ここまで、まずPrimaryの色を変えて、Secondaryとしてオレンジを追加しました。では次に、ボタンをいじっていきましょう。
このWires jpにあらかじめ入っているコンポーネント群の中から、ここにボタンのパーツがあります。先ほどPrimaryのカラーを変えたのでこのPrimaryのボタンがPlayStationと同じブルーのボタンになっています。PlayStationのページではすべてのボタンの角丸がなしで、全部四角いわりとソリッドなページになっているので、このPrimaryのボタンをちょっといじっていきましょう。
これはマスターコンポーネントになっているので、このままダブルクリックして、この背景となっている角丸の青、この丸ポチを動かして角丸を四角にしちゃいましょう。これだけでちょっとPlayStationのボタンっぽくなった。
もう1つ。ついでにSecondaryも修正しちゃいましょう。Secondaryもマスターコンポーネントになっているので、この背景の角丸をまず四角にします。
それからこれ、プロパティパネルを見ると塗りがなくて線だけになっているので、逆に線のチェックを外して塗りにして、先ほど登録したSecondaryカラーのオレンジを選択。これでオレンジのボタンになりましたね。ついでに文字色をWhite、白に変えておきましょう。これでSecondaryのボタンできました。その下のHoverとかPress用のものは、今はちょっと置いておこうと思います。
あとはもう1ついじっておきましょうか。このアイコンセットには、いくつかアイコンがあります。もちろんPlayStationで使われているアイコンとはぜんぜん違うんですけれども、せめて色だけ合わせておこうかなと思います。
どの色が使われているかというと、こんなふうにカラーパレットがアートボードにまとめられています。このように、アセットに登録してあるカラーだけじゃなくて、アートボードにカラーパレットとしてこの色がどういう数値でどこに使われているかまとめておくと、あとでわかりやすいのでわりとオススメです。
これを見ると「中間のブルーグレー」というのが「主にアイコンの塗りに使用します」と書いてありますね。つまり、アイコンはこの「ブルーグレー」になっていると。実際のPlayStationのサイトではアイコンはだいたい黒なので、これを「Black」に変えておきましょう。
カラーパレットでアセットのカラーで見ると、この「Blue gray」があるので、これを編集して「000(#000000)」、真っ黒に変えておきましょう。ん、これじゃないな。すみません。「Mid gray」か。これですね。失礼。アセットの中の「Mid gray」、これを編集して「000(#000000)」とすると……はい、変わりましたね。ここもBlackになりました。ついでに名前も「Black」に変えておきましょう。これでさっきのアイコンも全部黒になりましたね。とりあえずこれだけ。色とボタンをいじりました。
あとは実際にコンテンツを流し込んでみたいと思います。Wires jpの中には、日本のサイトによくあるコンポーネントの集まりとしてランディングページのトップ画面みたいなものとかカードコンポーネントとかがいくつか含まれています。この中からさっきのPlayStationのトップページ、確認できる人はもう1回いつでも見ていただいてけっこうですが、にありそうなページを選んでみましょうか。このランディングイメージがなんとなくいけそうな気がする。
じゃあ今度はここにさっき抽出した画像を使いましょう。ちょっと画像の場所を移動しますね。近づけます。抽出した画像のアートボードを近づけて……。はい、この中で、トップページのなんとなくメインビジュアルっぽい画像がこの中にあるのかなと思います。例えばこの『The Last of Us Part 2』とか。もうちょっとで発売ですね。これをコピーしました。
あとはこれを流し込んでいきたいんですけれども、XDで矩形オブジェクトとかに画像を放り込むときのやり方はいくつか種類があって、フォルダから直接放り込んだり、あとはブラウザとか、あとはPhotoshopのレイヤーからとか、いろいろなものから放り込めます。
そのやり方の1つが、アピアランスをペースト。ここの四角、これを選択して、右クリックして「アピアランスをペースト」というのをすると、今コピーした『The Last of Us Part 2 』のメインビジュアルっぽい画像をマスクオブジェクトみたいに貼りつけられます。
この「アピアランスをペースト」は、もともとは塗りとか線とかの属性・情報を貼りつけるものなんですけれども、画像に対してアピアランスをペーストした場合は、こんなふうに画像として貼りつけられます。
その上に乗っかっているテキストを適当に下に動かして、文字を見やすいように白にしておきましょう。なんとなくPlayStationのトップページに見えなくもないような感じになってきました。
『The Last of Us Part 2』、「詳しく見る」。オレンジボタンが今「製作実績」とかになっているので、せっかくなのでこれを「購入」としておきましょう。
PlayStationのページでは、Primary、PlayStation Blueを使ったボタンがリンクとして機能していて、オレンジのボタンは購入などのコンバージョンに結びつくところに使用されています。なのでこのスタイルガイドで「購入」。それからPlayStation上のルールに沿ったレイアウトにしてみました。
あとは、例えば同じく抽出した画像の中から……このPS4の画像がありますね。このPS4の画像を同じくコピーして、さっき画像を突っ込んだその下の今度は2分割のほう、こっちの画像エリアのほうを同じく選択して「アピアランスをペースト」。ちょっと画角が合っていないようなので調整して、若干動かすと……なんかそれっぽいみたいな。
あとは「似ているアートボードはないかな?」というところで、これをずらして、隣にあるこのカードコンポーネント集みたいなの、これを使いましょうか。このへんも同じく抽出した画像から適当にゲームの画像をコピーして、あとは同じように貼りつけていきます。
このやり方は非常に簡単で誰でもできるものです。ある程度テンプレートのようにXDでできあがっているものだったら、デザイナー以外の方、ディレクターさんとかプランナーさんとかふだんあまりデザインしないよという方も、この手法でなら、ポイポイとコンテンツとしての画像や色とかを調整するだけでちょっとリッチなワイヤーフレームぐらいなものが簡単にできるんじゃないかなと思います。はい、ちょっと貼りつけてみました。
実際にはカードコンポーネントの背景色はないので、ここのバックの座布団は取っちゃいましょう。ついでにあとは、もうちょっとだけ。このPrimaryの青いボタンをコピーして貼り付けます。このカードコンポーネントはリピートグリッドになっているので1個選択して、「詳しく見る」のボタンをカードコンポーネントに貼りつけます。まあ、こんな感じかなと。
こんな感じでザッとなんとなくこれとこれとこれ。遠目で見ると「わりとPlayStationっぽい」みたいなところまでできてきたんじゃないでしょうか。
もちろん細かいところというか、だいたいスタイルガイドとしてはもちろん本物のPlayStationのページとはまだまだズレているのでぜんぜん違うんですけれども。よく見ると株式会社XDみたいな感じですね。
もちろん実際のページとはまだまだぜんぜん違うんですけれども、そのコンテンツが持つデザインの概念や原則、そしてスタイルガイドといった、さきほどのデザインシステムの含まれる要素を意識したコンポーネント構築が少し体験できたんじゃないかなと思います。
今日はもうほとんどXDの基本機能みたいなところしか使っていないので、わりと簡単にお手軽にできる。だけれどもデザインシステムをちょっと体験する手法として「こういうこともできるよ」というのをご紹介しました。
その時もただマネしていくんじゃなくて、「そのページがどういう概念や原則で成り立っているのか?」「キーとなるカラーは何なのか?」とか、「スタイルガイドとしてどういう構造が繰り返し使われているのか?」とか、そういうところに思いを馳せながら練習がてら試してみるといいんじゃないかなと思います。
デザインシステムを体験してみたところで、本日のまとめです。
まず、コンポーネントライブラリはか弱い。「か弱いってどういうことだよ?」って思うんですけれども、デザインシステム三天皇の最弱とも言うべきコンポーネントライブラリは、いきなり細かいパーツを作り込んでもそれのみでは生きられない、か弱い存在です。必ずデザイン概念、それから原則であったりスタイルガイド、上位概念でもあるそれらとセットで考えましょうというところですね。なので、コンポーネントライブラリだけ先走って考えてもあまり意味はないよというところですね。
そしてもう1個。デザインシステムは更新し続けるもの。もちろん今軽く作ったものなんですけれども、作ったら終わりというわけではなくて、コンポーネントを含むデザインシステムは一度作ればおしまいというものではなく、「せっかく作ったのに使いこなせるのは一部の人だけ」みたいなのだと、そのうち忘れ去られてしまいます。なので、しっかりとチーム内で共有して必要に応じて更新し続けることで、はじめて運用できるんじゃないかなと思います。
これは最後になるんですけれども、今日お話ししたことって、実は別にXDじゃなくてもよかったりするんですよね。
ツールが変わっても考え方は変わらない。デザインシステムの更新とか運用の概念、どういうもので構成されているのか、そういうのを知っていれば本来なら別にXDにこだわる必要もなく、自分やチームに合った無理のないツール、それから運用方法でしていくのが一番大事なんじゃないかなとも思います。
というところで、今日のセッションはおしまいとなります。ご清聴ありがとうございました。
2024.10.29
5〜10万円の低単価案件の受注をやめたら労働生産性が劇的に向上 相見積もり案件には提案書を出さないことで見えた“意外な効果”
2024.10.24
パワポ資料の「手戻り」が多すぎる問題の解消法 資料作成のプロが語る、修正の無限ループから抜け出す4つのコツ
2024.10.28
スキル重視の採用を続けた結果、早期離職が増え社員が1人に… 下半期の退職者ゼロを達成した「関係の質」向上の取り組み
2024.10.22
気づかぬうちに評価を下げる「ダメな口癖」3選 デキる人はやっている、上司の指摘に対する上手な返し方
2024.10.24
リスクを取らない人が多い日本は、むしろ稼ぐチャンス? 日本のGDP4位転落の今、個人に必要なマインドとは
2024.10.23
「初任給40万円時代」が、比較的早いうちにやってくる? これから淘汰される会社・生き残る会社の分かれ目
2024.10.23
「どうしてもあなたから買いたい」と言われる営業になるには 『無敗営業』著者が教える、納得感を高める商談の進め方
2024.10.28
“力を抜くこと”がリーダーにとって重要な理由 「人間の達人」タモリさんから学んだ自然体の大切さ
2024.10.29
「テスラの何がすごいのか」がわからない学生たち 起業率2年連続日本一の大学で「Appleのフレームワーク」を教えるわけ
2024.10.30
職場にいる「困った部下」への対処法 上司・部下間で生まれる“常識のズレ”を解消するには