Daily UI #053（Website Navigation）
Daily UI 53日目のお題は「Website Navigation」。
官公庁の資料リデザイン第3弾です。
制作過程
今回は8時間半くらいでした。めっちゃかかってしまった。。
制作の流れ
リサーチ：59分
ラフ：7時間26分
--------------------------
計 8時間25分
リサーチ
お題はwebサイトのナビゲーションですが、少し前にwebサイトのデザインは作ったばかりなので、官公庁の資料リデザインにしました。リデザイン対象として選んだのは、こちらの資料です ↓
AI戦略の全体像を表した図です。一応web・デジタル関連にした（つもり）です。
条件設定
制作する上での条件を決めます。これは過去回と同じです。
制作条件
①情報量を変えない
・情報を削らない（文意が変わらない軽微な変更はOK）
・ページ数を変更しない
②制作背景を考慮してリデザインする
・一覧性や網羅性が重視されている
・初見での見やすさ、分かりやすさは重視されていない
・不要な情報操作をしない
構想をつかむ
スライドの構成は大体こんな感じです ↓
大きく横に2分割しており、タイトルの下に世界の現状・日本で目指すことが書いてあります。世界の現状は「世界のAI戦略」と「世界のAI投資・研究開発・人材」の2項目があり、世界ではAIに対してこういう戦略・投資をしているよ、その世界に対して日本は遅れているよ、みたいなことが書いてあります。
日本で目指すことは「重点方針」「AI戦略パッケージ」「AI活用により実現すべき社会（Society5.0）の絵姿」の縦割り3項目に分かれていて、重点方針に基づいて具体的にこういうこと（＝AI戦略パッケージ）をして、ゴールはここ（＝AI活用により実現すべき社会）を目指しているよ、みたいな内容です。前後関係がはっきりあるので、ここの流れは崩したくないところです。「重点方針」と「AI戦略パッケージ」はそれぞれ「教育改革」「研究開発」「社会実装」の3項目に分けられていて、各項目の詳細が書いてあります。
ラフ
とりあえず文字を並べたところ ↓
最終的には元画像と同じ4:3のスライド1枚に収める想定ですが、全然入る気がしません。
なんとか1枚に収めたところ ↓
レイアウトも元画像とほぼ同じです。というか隙間がなさ過ぎて変えようがありませんでした。満員電車で身動きとれない、みたいな気持ちです。
少し枠線等を足してなんとかキレイにしようとしているところ ↓
右の縦列「AI活用により実現すべき社会（Society5.0）の絵姿」の右下辺りに半端な余白が空いてしまうので、なんとかしたいなというところです。
思い切ってスライドを縦にしたところ ↓
制作条件的にはかなりグレーですが、比率は変えていないので許してほしい…の気持ちです。
かなり完成に近づいてきたところ ↓
「重点方針」と「AI戦略パッケージ」内の3項目が同じだったので、共通の縦3列で割ってみました。
完成
最終的に制作した資料がこちら ↓
デザインのポイント
縦長フォント
文字量がえげつないので、縦長のフォントを使って少しでもスペースを節約しようと試みました。「ヒカリ角ゴ」というフォントを使っています。ウェイトは主にCondensed Bookです。他にもウェイトがたくさんあって使いやすい+無料で手に入るのでオススメです。
制作してみて
正直、失敗だったと思います。元画像を最初に見た時はもうちょっと…なんとかならんかったのか…と思っていたんですが、やってみるとなかなか上手くはまらなくて激ムズでした。リデザインどころか改悪したかもしれません。何時間もいじくりまわした結果、あの文字サイズを維持したまま、あの分量をスライド1枚にキレイに収めるのは元画像がベストだったという結論になりました。「デザイン楽しい」より「デザイン難しい」が久しぶりに勝った回でした。
それと、話がやや変わりますが、いろんな企業の資料が見られる便利なサイトを最近発見したので、ここにメモしておきます。「Slideland」というサイトです ↓
デザインのインプットとしてだけではなくて、ただ眺めているだけでも楽しいです。会社紹介や統合報告書・決算資料等、いろんなタイプの資料が載っています。会社の種類もいろいろです。
マネーフォワードさんの統合報告書が可愛かったので貼っておきます ↓