こんにちは、ウェブデザイナーの横田です。先日、私の所属する部署、日本デザインセンター オンスクリーン制作室のウェブサイト（以下、オンスクサイト）をリニューアルしました。リニューアル全体の話はデザインを担当した志村がnoteに書いているのでご覧ください。
さて、先のnoteでも触れられていたと思いますが、ポートフォリオサイトでの実績の見せ方、大事です。ここで紹介する「見せ方」は、純粋に画像としてどう見せるかの話です。普段は釣りの話に絡めるのですが、半年近く釣り行けていないので、文体のノリとしては、日本語訳された思考や手法に関する海外書籍のイメージです。
オンスクサイトの場合
進め方として先にデザインのテンプレートが出来上がってきている状態で、さて事例紹介の見せ方どうしようか。という話になりました。これがFigmaで進んでいたデザインテンプレです。すでにライト・ダークの想定がされています。
作業の手間を考えなければ、事例の画像もライト・ダークある方が素直だと考えます。ブラウザだけダークモードになったけど、白いママのウェブサイトにがっかりするように😞
デバイスやUIのモックがライト・ダークで変わるのは必須です。
そして、ダークモードが設定されている事例に関しては、キャプチャ自体も変えるべきです。
素直ですね？
PCとSP（スマートフォン）の考え方
「ライト・ダーク、閲覧されている状態によって画像とその中身がそれに従うのが素直だとすれば、あなたが見ているデバイスがパソコンか、スマートフォンか、それによっても画像が切り替わる方が自然だ」と、デザイナーの後藤が提案しました。自身の多忙さは鑑みず。
もちろん、ダークモードもあります。
これで私たちはライト・ダーク、PC・SP、1画像に対して4パターンものデータをつくる必要がでてきました。自ずと一案件に掲載する画像が減ったことは言うまでもありません。 ただ、幸運なことに、どの案件も実際のウェブサイトをみることができるものが殆どです。
ウェブサイトを実物たらしめる
さて、前の章では「どの案件も実際のウェブサイトをみることができる」と言ったものの、実際には（自分たちではどうにもできない理由で！）見れなくなる日がくることを知らない人はいません。 それに私たちのポートフォリオから実際のウェブサイトを全部みるなんて、よほど私たちのことを好きな人しかできないでしょう（家族や恋人だってそれができるか怪しいものです）。
しかし、実際のウェブサイトを手元のデバイスで見ているときの感覚と、ポートフォリオサイトで画面キャプチャを見ているときの感覚には、インタラクションが無いということを差し引いても大きく違うでしょう。
何が違うのでしょうか。私たちはそのサイトを見ている目とディスプレイまでの空間が大切な何かだと考えました。距離や空気がウェブサイトを実物たらしめるのだと。
空気を含んだメインビジュアル
そこで私たちは実際のデバイスを撮影しました。インターネット上には同じようなテンプレートがたくさん配布されていました。しかし、ライト・ダークの2パターンがあって、スタートアップ企業のような鋭さではなくて、ミシガンの湖畔のような静けさのあるテンプレートを知っていますか。探す時間があったらさっさと作れ。
昼に撮影した状態のまま、夜に同じ状態を撮影しているので、その日はデスクもデバイスも使えなくて。仕事にならなかったことは言うまでもありません。
もちろん、スマートフォンも同様に撮影しています。レイヤーを差し替えることで、画像を生成します。Figmaで一括管理できればよかったですが、さすがに画像編集はPhotoshopを使っています。
採用しなかったメインビジュアル
ノートパソコンをおくことは画面に対して、デバイスの存在感が大きすぎるので採用しませんでした。iPadで表示するときに最初の案では、この写真のようにSmart Keyboardを採用していましたが、新しいMagic Keyboardが発売されたタイミングだったこともあり、「なんか、ちょっと、古い」というコメントがありました。 たしかに、ウェブサイトを取り巻く環境はそのまま年表になります。
最終的に使ったのは、 Amazonベーシックから発売されているこのスタンドです。非常にベーシックで私たちは満足しました。記事中に商品リンクが入るとブログらしさがでますが、アフィリエイトリンクではありません。
https://www.amazon.co.jp/dp/B01IJ5A0PC
更新しなければサイトにならない
そう、ウェブサイトは更新しないといけないのです。更新するためには、私たちの事例が増える必要があることに気付きました。 そして、あなたはその手伝いができる可能性を持っています。まずは私たちのポートフォリオサイトにアクセスすることをオススメします。