[制作者向け] 404 NOT FOUNDページにみるレクサスのおもてなし精神、その他の自動車メーカーの404ページもまとめてみた

「404 – ページが見つかりませんでした」というページってどんなアナウンスしていますか?

リクエストしたURLにコンテンツが存在しなかった場合に表示される、404ページ。皆さんはどのように表示させていますか?

ちなみこのサイトでは、こんな感じで表示されます。(Twenty Fifteenテーマのデフォルトの表示です。)

404 NOT FOUNDページ

いやぁ、おもてなしの精神を感じませんね。私は悪くない、あなたがこのURLを開いたのが悪いんだ!お望みのページを勝手に探してくれって感じるナイスなアナウンスになっています。(言い過ぎ?!)

さて、そんななか、レクサスの404 NOT FOUNDページがシンプルながらも素敵だったので今回紹介します。レクサスを見た後に、他の自動車メーカーの404 NOT FOUNDページも気になったので勉強がてら集めて見ました。

皆様のサイト制作の参考になれば幸いです。

レクサスの404 NOT FOUNDページに感じるおもてなしの精神

さて、私が見たのはこの404 NOT FOUNDページです。

非常に簡潔ながらも、レクサスのおもてなしの精神が行き届いていて、素敵ですね。

大変申し訳ありませんが、該当ページがございません。 トップページへご案内いたします。 このページをブックマーク登録されていた方は、 お手数ですがブックマークの変更をお願いいたします。 なお、このページは5秒後に自動的にジャンプします。 ※自動的にジャンプしない場合は、上記のリンクをクリックして下さい。実際のページを見てみたい方はこちらをクリック

トップページへご案内いたします。

リダイレクトのことを「ご案内致します。」と表現するあたり、ちょっと感動しました。レクサスのショールームで対応をして頂いているような感じを受けます。

また、リダイレクトや画面遷移というようなむずかしい単語は使われず、ジャンプというイメージしやすい言葉で置換えられています。ブックマークしている方への配慮も忘れていません。

このキャプチャだとセンタリングされているように見えますが、実際は左上にコンパクトにまとめられています。これも何か意図があるのかな。

私のブログのNOT FOUNDページと比べると、その差は明らかですね。

その他の自動車メーカーの404 NOT FOUNDページ

レクサス以外の404ページも気になったので集めてみました。各社様々なスタイルで「ページが見つかりませんでした」と伝えてくれています。

※ 一部キャプチャは縦長になりすぎたためトリミングしております。リンク先は各社のトップページにしてありますので、各自でNOT FOUNDページを探してみてくださいませ。

トヨタ自動車

まずはトヨタ。レクサスとほぼ同じ構成でした。シンプルかつ自動リダイレクト。

https://toyota.jp/

トヨタ自動車のNOT FOUNDページ

スズキ

ももクロちゃんがCMをしているハスラーがバカ売れのスズキです。意外とシンプルな感じの作りになっています。

「スズキのサイトでなにかお探しですか?」という文言に言葉にできない違和感を感じるのは私だけでしょうかね。

http://www.suzuki.co.jp/

スズキのNOT FOUNDページ

スバル

スバルのNOT FOUNDページは、メッセージの下にサイトマップやキャンペーン情報を表示しています。

トップページやサイトマップに移動して別のページを探すよりもこの方が機能的だし私は好きでした。

https://www.subaru.jp/

スバルのNOT FOUNDページ

日産自動車

theシンプル。メッセージを表示して5秒後にページ遷移する作りでした。

5秒しか滞在できないし、長い文章は読んで貰えなそうですし。リダイレクトするといいう前提で考えるとこれは有りかと思いました。

http://www.nissan.co.jp/

日産自動車のNOT FOUNDページ

光岡自動車

WordPress で作られているようで、404 File Not Foundと表示されるのはSEO系プラグインか何かの影響かな?と関係ないことを考えてしまいました。

サイトマップへとサイトのトップへと2つのリンクがありますが、ページを探すならサイトマップを見てもらったほうが早いし、2つあると迷いそうだなぁと個人的には思いました。

http://www.mitsuoka-motor.com/

光岡のNOT FOUNDページ

三菱自動車

英語との併記!これは多言語サイトのせいなのか、日本に済む外国人への配慮なのか、少し気になるところです。

シンプルかつリダイレクトでトップページへ行きます。レクサスやトヨタと似たような作りですね。

http://www.mitsubishi-motors.co.jp/

三菱自動車のNOT FOUNDページ

マツダ

シンプルな作りです。リダイレクトはされませんが、上下にグローバルナビゲーションやフッターナビゲーションがあるので迷うことはなさそうです。

「引き続きマツダオフィシャルサイトでの快適なドライブをお楽しみください。」といメッセージが添えられているあたり、マツダらしいですね。

http://www.mazda.co.jp/

マツダのNOT FOUNDページ

ホンダ

一番驚いたのはホンダのサイトでした。

スバルと同じくお知らせや簡単なサイトマップがあるのですが、更にその下には「問題点についてお知らせ下さい」という見出しとともに、フォームが表示されています!こんなNOT FOUNDページはじめて見た!

ホンダのモノづくりに対する精神というものを感じるNOT FOUNDページになっています。

http://www.honda.co.jp/

ホンダのNOT FOUNDページ

ダイハツ

よく見る404ページですね。

「前のページに戻る」ボタンをクリックするとJavaScriptでひとつ前のページに戻る作りになっています。こういうのって検索エンジンから直で来たときって検索エンジンに戻っちゃうので悩みどころですよね。

https://www.daihatsu.co.jp/

ダイハツのNOT FOUNDページ

外国車の自動車メーカー

MINI

ミニはビジュアルでNOT FOUNDを表現している感じでしょうか。

  1. NOT FOUND.という文言を見なければ、パット見、あまり404ページぽくないですね。

https://www.mini.jp

MINIのNOT FOUNDページ

メルセデスベンツ

(!)という表示に見る側が驚きそうですが、ベンツのNOT FOUNDページは画像もなく割りとシンプル。トップページに戻らずに各種リンクを案内しています。

http://www.mercedes-benz.co.jp/

メルセデスベンツのNOT FOUNDページ

BMW

アドレスの入力が誤っている可能性があります。という断定にBMWらしさを感じますね。ヘッダー・フッターからページを見つけてもらえる作りになっています。

http://www.bmw.co.jp/

BMWのNOT FOUNDページ

テスラ

Drupalで作られているサイトのようです。ザ・海外って感じがします。

ページが見つからなかったことと共に、シンプルなナビゲーションが記載されています。

https://www.tesla.com/jp/

テスラのNOT FOUNDページ

まとめ

いかがでしたでしょうか?

お客様の欲しい情報を提供できなかった時、自動車メーカーはどういった応対をするのか。

NOT FOUNDページひとつですが、こうやって見てみると、各社の色が出てますね。

個人的にはスバルやホンダのような機能的な404 NOT FOUNDページが好きです。

特にホンダの「問題点を教えて下さい」っていう姿勢は、本田宗一郎の精神が根付いているように感じました。

 



[勉強会]第1回 D2D WEBグラフィックツール今昔 に参加してきました

d2d

先週末に京都で開催されたグラフィック関係の勉強会に参加させていただきました。
グラフィック系の勉強会に参加することはあまり無いので大変勉強になりました。

第1回 D2D WEBグラフィックツール今昔 ~デザインワークフローの転換~
https://d2draft.doorkeeper.jp/events/40613

concrete5のテーマを制作している方に出会えたり、デザインで独立しようとする方に出会えたり、出会いや学びの多い勉強会で、京都まで足を運んだ甲斐がありました。

 

感想

デザイン界隈では当たり前なことかもしれませんが、以下のIllustratorの機能を活用することでよりWEBへの親和性を高めるという話は大変勉強になりました。

・スウォッチ
・段落スタイル
・文字スタイル
・グラフィックスタイル

上記機能を活用することで、

  • デザインの表現をモジュール化(部品化)してチーム内・会社内での共有することで生産性を高めること。
  • お客様とのコラボレーションツールを使ってコミュニケーションコストを下げ、成果物の精度を高めること。
  • Adobe CC からそういった共有化やコラボレーションツールとの連携が強化されていること。

IllustratorやPhotoshop、更にそれを取り巻く環境がこんなにも進化しているとは。と感じた勉強会でした。

[コラボレーションツール]

・アボカド
https://avocode.com/home/

・ゼッペリン
https://zeplin.io/

 

 

スライド

杉山さんのブログにスライドがアップされていました。

D2D WEBグラフィックツール今昔 デザインワークフローの転換 v1.0 Note 2016/4/2(土)

#1 Illsutratorでのウェブデザインワークフロー例の紹介
http://prezi.com/mojhh25kig3u/?utm_campaign=share&utm_medium=copy

#2 Photoshop,Illsutrator,アセット管理のワークフロー例の紹介
https://docs.google.com/presentation/d/1ipdFr4nN0gbHdiJvKLV2LVcISAvMGbrmXSbCvfNaA-8/edit#slide=id.g1289d4a935_2_156

#3 Sketch,Experience Design,コラボレーションサービスのサマリー
スライド:webdesign-workflow.pdf

 

以下、当日にメモした内容です。


#1 Illsutratorでのウェブデザインワークフロー例の紹介

川井昌彦さん

Cherry Pie Web
http://www.cherrypieweb.com/

Fireworksを相当古いバージョンの頃から使っていて、最近ではIllustratorとPhotoshopでWEBデザインをしているとのこと。
Fireworksを未だに愛用している私からすると、まさに私が進む道を照らしてくれた内容でした。

 

なぜIllustratorを使うのか?

・元々はFireworksを使っていた
・写真はPhotoshop、ロゴ・地図はIllustratorで作ってた
・Fireworks開発中止の連絡があってからIllustratorがFireworksの代わりになった
理由:元々紙のデザインを作っていたから

・IllustratorはHTML+CSSとの親和性が高い
・画像がリンクで配置できる(画像も、ドキュメントの解像度に依存しない)
・スタイル機能は、外部CSSの考え方に近い
・アピアランスは、CSSで表現できる
・画像の書き出しだけでなく、HTMLで表現する部分のデザインも出来る

 

サンプルサイト

非公開のためURL掲載できませんが以下の内容で構築されておりました。

・WordPressで構築
・レスポンシブ
・Bootstrapベース
・多言語(日本語・英語・中国語・韓国語)

Illustratorデータを紹介(CC2015)

・お客様にデザインを見せる必要があるのでモックアップをIllustratorで毎回作る。
・アートボードを2つ作る
・PC用、スマホ用
→ スマホ用はレイアウトを確認するのみ。書き出しにはPC用を使用する。
・Bootstrap用の背景を設置(960px幅)
→ これに合わせてデザインを作成していく
・レイヤー
・ヘッダーレイヤ
→ 多言語ボタンは国旗のみ書き出している
→ 翻訳ボタンという【グラフィックスタイル】を作っていて、CSSを書き出して?いる
→ 多言語サイトなので、画像ファイル名のサフィックスに_jaJPなどを設定している
・各ページのレイヤ(全ページを一つのアートボードにレイヤを分けて設置している)
→ 別々のファイルにしてしまうとスタイルが共有できないため
→フッター・バナー・グローバルメニュー・スライドショーなども各レイヤに配置してある。
→ あるページはスライスを一つも書き出していない。
→ でもお客様に見てもらうためにテキストを流し込んである
→ 見出しなどは【段落スタイル】を設定していてCSSと連動している
→ フォントファミリーにはメイリオを設定していて実際にブラウザで見える画面と同様に確認してもらっている
→ HTMLの構造を意識したデザイン
→ 使う画像は高解像度の画像をリンクしてはっている。

制作時に注意していること

・イラレの設定をWEBデザインに適した設定にしておく
→ 新記事にプロファイルをウェブにしている。
・配置画像は、すべてPSDにしてリンク
埋め込まない、画像補正等はすべてPhotoshopで行う
・画像で書き出す部分とHTML+CSSにする部分はパッと見てわかるようにする。
・レイヤを活用してわかりやすく
・HTMLにする部分は「文字組みアキ量設定」を適用しない
・スウォッチ、段落スタイル、文字スタイル、グラフィックスタイルを積極的に使う
・スライスは一つのレイヤーにまとめる(重なるスライスの前後面を操作しやすい)
・レイヤーはHTMLの入れ子を意識してまとめる

 


#2 Photoshop,Illsutrator,アセット管理のワークフロー例の紹介

完山 祐毅(もとやま ゆうき)さん

motoyamayuki.com
http://motoyamayuki.com

無駄なくスマートな制作をされているなぁと感じる内容でした。
画像アセットの話とかProttの話とか、名古屋の田舎者には衝撃的でした。

 

制作フロー

・Illustratorはprottでワイヤーフレームを作る
・Illustratorでデザイン制作
・Plottoでお客さんに確認

 

Illustratorでデザイン

・アートボードでページ管理
→デザインが完成した時に、PNGでページ全体を書き出し→アートボード毎に作成にチェックをして書き出し
→クライアントに確認してもらいやすい
・シンボルでモジュール化
→ グローバルナビをシンボルとして登録
→ シンボルを編集するとすべてのアートボードの部品が変わる
→ 登録したいものを選択してシンボルに放り込むと登録できる
・グローバルカラー
→スウォッチ→色選択→編集するとすべての色が変わる
→色はスウォッチから設定する
→スウォッチメニュー→新規スウォッチ→グローバルにチェックを入れる
・AdobeStock
→AdobeStockで素材を探す
→ダウンロードするとIllustratorのライブラリに表示される
→カンプ状態で保存してクライアントOKが出たら購入する

 

Prottでクライアント確認

Prott
https://prottapp.com/ja/

・Prottで新規プロジェクト作成
・リンクを設定していく
・シェア→URLをクライアントに送る
・Prottで改善されるといい点
ページ内リンクには対応していない。
ページの背景が勝手に設定される

 

Photoshopでパーツ書き出し(画像アセットを活用)

・イラレファイルをコピーしてparts.aiとして保存
・書き出したい画像やアイコンだけを一つのアートボードにまとめる
・アイコンはグループ化しておく
・Photoshop形式にして書き出し
→ スクリーン・レイヤーを保持を選んでおくこと
・Photoshopでファイルを開く
→ レイヤー名をファイル名に設定 header.pngなど
・ファイル→生成→画像アセット
parts-assetsフォルダに各画像が書き出される
・Photoshopのスクリプト「LayersRenamer」を使うと一括でレイヤー名を設定出来る
・Photoshopを保存すると自動で画像が書き出される
・logo.png8にするとPNG-8
・logo.jpg10にすると100%の圧縮率で保存
・logo.jpg,logo.gifとするとJPGと画像が生成される
・RETINA用に@2x的な書き出しも出来る
→ 画像はスマートオブジェクトにしておく必要がある
・Adobe Layer Nameスクリプトを使うと上記のレイヤー名に変更可能

 

Gyazoで確認

Gyazo
https://gyazo.com/ja
→ ソフトを立ち上げてエリアを選択すると画像がサーバにアップされる
→ その画像をクライアントに送って確認してもらう
→ オンラインで注釈をつけたり出来る

JPEGminiで画像ファイルを圧縮
http://www.jpegmini.com/

 


#3 Sketch,Experience Design,コラボレーションサービスのサマリー

D2D主催者
杉山 敦さん

pictron.net
http://pictron.net

Illustrator、Photoshopを製品単体で使うのではなく、他のサービスとコラボレーションして使う方法なんて考えたことなかったし、できるとも思っていませんでした。
杉山さんのセッションを聞いて、これからのデザインは、自分で煮詰めるものからオープンに知恵を出し合ってするものに変わっていくんだなと感じました。
avocode(アボカド)やzeplin(ゼッペリン)のように、デザイン業界のGithub!的なサービスがこれから更に増えていくんだろうなぁ。

聞くのに必死過ぎてメモが不完全ですみません。
デザインの未来を感じられるセッションでした。

 

 

データ構造の公開とコマンドラインインターフェースの実装

新たにデータフォーマットに対応した
コラボレーション
プロトタイピング
バージョニング
オープンAPIによる連携
Sckech
Photoshop
slack

 

Photoshop CC 2015の話

画像アセットは書き出し機能ではない
Generatorテクノロジーという概念
BracketsでPhotoshopの画像を表示させながら連携できる
SlackでPhotoshopデータを共有出来る
Extract機能がある物同士は連携できるっぽい

 

Sketchの話

https://www.sketchapp.com/

いい点

・動作が早い
・グラフィックデータが軽い
・有用なプラグインが開発されている
・データ、APIがオープンで連携サービスが多い
・書き出しの階層化はスマート
→ 書き出しの設定を複数出来る。1倍書き出しと2倍書き出し(RETINA用)をまとめて出来る

微妙な点

・ビットマップ編集は途上
・パスツールに慣れが必要
・Windows版がない
・結局Adobeは必要

プラグイン

SketchGitプラグイン

→ Gitとの連携が容易(プレビュー用のデータも自動で作ってGitにアップしてくれる)
→ 過去との差分も見やすい
→ 変更をウォッチして自動的にGitにアップするツールがあったりするがデザインの性質上おすすめできない

CRAFTプラグイン(無料)
https://www.invisionapp.com/craft
レイアウトの繰り返しなどを自動化してくれる
PhotoshopCCにも入れれる

 

コラボレーションサービス

・Adobe Experience Design CC
CRAFTの影響を結構受けているみたい

・アボカド avocode.com
https://avocode.com/home/
Sketch、イラレで作ったデータをアップする
ローカルアプリと連携することで書き出しが出来る
LESSやSASSにも対応している
コメント機能などがあり、コラボレーションしやすい
バージョン管理もしてくれる

・ゼッペリン zeplin.io
https://zeplin.io/
Sketchで作ったデータを入れるとオンラインでPNGやSVGで書き出しできる
LESSやSASSにも対応している
Invite機能をつかえばコラボレーションしやすい

・ウエイク
https://wake.com/
上記と似たサービス

 

プロトタイピングツール

・インビジョン inVision
https://www.invisionapp.com/
→ 画面上でメンバー間でやり取りできる

・marvel
https://marvelapp.com/

・Prott
https://prottapp.com/ja/

・Adobe Experience Design CC
http://www.adobe.com/jp/products/experience-design.html

 

セッションまとめ

これからの制作環境はオープンで繋がることがキー
でもツールが進化したからと言ってアイデアをだしてはくれない
デザインをサポートしてくれる自分にとって楽な技術を選択しましょう。


 

長々としたメモですみません。

勉強会の後の懇親会も楽しかったです。京都また行きたい!

ありがとうございました!