onocomコンテンツへスキップonocomWordPress、concrete5、Mautic、JavaScript、PHP、Docker、プログラミングなどの覚え書きをしていきます。【Office】Excelでプロジェクト管理(工程・実績管理・スケジュール管理)するためのガントチャート・テンプレートを作りました。ページが見つかりませんでした」というページってどんなアナウンスしていますか?リクエストしたURLにコンテンツが存在しなかった場合に表示される、404ページ。皆さんはどのように表示させていますか?ちなみこのサイトでは、こんな感じで表示されます。Fifteenテーマのデフォルトの表示です。)いやぁ、おもてなしの精神を感じませんね。私は悪くない、あなたがこのURLを開いたのが悪いんだ!お望みのページを勝手に探してくれって感じるナイスなアナウンスになっています。FOUNDページがシンプルながらも素敵だったので今回紹介します。FOUNDページも気になったので勉強がてら集めて見ました。皆様のサイト制作の参考になれば幸いです。FOUNDページです。非常に簡潔ながらも、レクサスのおもてなしの精神が行き届いていて、素敵ですね。実際のページを見てみたい方はこちらをクリックトップページへご案内いたします。リダイレクトのことを「ご案内致します。」と表現するあたり、ちょっと感動しました。レクサスのショールームで対応をして頂いているような感じを受けます。リダイレクトや画面遷移というようなむずかしい単語は使われず、ジャンプというイメージしやすい言葉で置換えられています。ブックマークしている方への配慮も忘れていません。このキャプチャだとセンタリングされているように見えますが、実際は左上にコンパクトにまとめられています。これも何か意図があるのかな。FOUNDページと比べると、その差は明らかですね。FOUNDページレクサス以外の404ページも気になったので集めてみました。各社様々なスタイルで「ページが見つかりませんでした」と伝えてくれています。一部キャプチャは縦長になりすぎたためトリミングしております。FOUNDページを探してみてくださいませ。トヨタ自動車まずはトヨタ。レクサスとほぼ同じ構成でした。シンプルかつ自動リダイレクト。https://toyota.jp/スズキももクロちゃんがCMをしているハスラーがバカ売れのスズキです。意外とシンプルな感じの作りになっています。「スズキのサイトでなにかお探しですか?」という文言に言葉にできない違和感を感じるのは私だけでしょうかね。FOUNDページは、メッセージの下にサイトマップやキャンペーン情報を表示しています。トップページやサイトマップに移動して別のページを探すよりもこの方が機能的だし私は好きでした。https://www.subaru.jp/日産自動車theシンプル。メッセージを表示して5秒後にページ遷移する作りでした。5秒しか滞在できないし、長い文章は読んで貰えなそうですし。リダイレクトするといいう前提で考えるとこれは有りかと思いました。Foundと表示されるのはSEO系プラグインか何かの影響かな?と関係ないことを考えてしまいました。サイトマップへとサイトのトップへと2つのリンクがありますが、ページを探すならサイトマップを見てもらったほうが早いし、2つあると迷いそうだなぁと個人的には思いました。英語との併記!これは多言語サイトのせいなのか、日本に済む外国人への配慮なのか、少し気になるところです。シンプルかつリダイレクトでトップページへ行きます。レクサスやトヨタと似たような作りですね。http://www.mitsubishi-motors.co.jp/マツダシンプルな作りです。リダイレクトはされませんが、上下にグローバルナビゲーションやフッターナビゲーションがあるので迷うことはなさそうです。「引き続きマツダオフィシャルサイトでの快適なドライブをお楽しみください。」といメッセージが添えられているあたり、マツダらしいですね。http://www.mazda.co.jp/ホンダ一番驚いたのはホンダのサイトでした。FOUNDページになっています。http://www.honda.co.jp/ダイハツよく見る404ページですね。「前のページに戻る」ボタンをクリックするとJavaScriptでひとつ前のページに戻る作りになっています。いうのって検索エンジンから直で来たときって検索エンジンに戻っちゃうので悩みどころですよね。FOUNDを表現している感じでしょうか。FOUND.という文言を見なければ、パット見、あまり404ページぽくないですね。FOUNDページは画像もなく割りとシンプル。トップページに戻らずに各種リンクを案内しています。http://www.mercedes-benz.co.jp/BMWアドレスの入力が誤っている可能性があります。いう断定にBMWらしさを感じますね。ヘッダー・フッターからページを見つけてもらえる作りになっています。http://www.bmw.co.jp/テスラDrupalで作られているサイトのようです。ザ・海外って感じがします。ページが見つからなかったことと共に、シンプルなナビゲーションが記載されています。https://www.tesla.com/jp/まとめいかがでしたでしょうか?お客様の欲しい情報を提供できなかった時、自動車メーカーはどういった応対をするのか。FOUNDページひとつですが、こうやって見てみると、各社の色が出てますね。FOUNDページが好きです。ホンダの「問題点を教えて下さい」っていう姿勢は、本田宗一郎の精神が根付いているように感じました。参加してきました先週末に京都で開催されたグラフィック関係の勉強会に参加させていただきました。グラフィック系の勉強会に参加することはあまり無いので大変勉強になりました。~デザインワークフローの転換~https://d2draft.doorkeeper.jp/events/40613concrete5のテーマを制作している方に出会えたり、デザインで独立しようとする方に出会えたり、出会いや学びの多い勉強会で、京都まで足を運んだ甲斐がありました。感想デザイン界隈では当たり前なことかもしれませんが、以下のIllustratorの機能を活用することでよりWEBへの親和性を高めるという話は大変勉強になりました。・スウォッチ・段落スタイル・文字スタイル・グラフィックスタイル上記機能を活用することで、デザインの表現をモジュール化(部品化)してチーム内・会社内での共有することで生産性を高めること。お客様とのコラボレーションツールを使ってコミュニケーションコストを下げ、成果物の精度を高めること。いった共有化やコラボレーションツールとの連携が強化されていること。IllustratorやPhotoshop、更にそれを取り巻く環境がこんなにも進化しているとは。[コラボレーションツール]・アボカドhttps://avocode.com/home/・ゼッペリンhttps://zeplin.io/スライド杉山さんのブログにスライドがアップされていました。Design,コラボレーションサービスのサマリースライド:webdesign-workflow.pdf以下、当日にメモした内容です。Webhttp://www.cherrypieweb.com/Fireworksを相当古いバージョンの頃から使っていて、最近ではIllustratorとPhotoshopでWEBデザインをしているとのこと。Fireworksを未だに愛用している私からすると、まさに私が進む道を照らしてくれた内容でした。Illustratorを使うのか?・元々はFireworksを使っていた・写真はPhotoshop、ロゴ・地図はIllustratorで作ってた・Fireworks開発中止の連絡があってからIllustratorがFireworksの代わりになった理由:元々紙のデザインを作っていたから・IllustratorはHTML+CSSとの親和性が高い・画像がリンクで配置できる(画像も、ドキュメントの解像度に依存しない)・スタイル機能は、外部CSSの考え方に近い・アピアランスは、CSSで表現できる・画像の書き出しだけでなく、HTMLで表現する部分のデザインも出来るサンプルサイト非公開のためURL掲載できませんが以下の内容で構築されておりました。)Illustratorデータを紹介(CC2015)・お客様にデザインを見せる必要があるのでモックアップをIllustratorで毎回作る。スマホ用はレイアウトを確認するのみ。書き出しにはPC用を使用する。別々のファイルにしてしまうとスタイルが共有できないため→フッター・バナー・グローバルメニュー・スライドショーなども各レイヤに配置してある。あるページはスライスを一つも書き出していない。使う画像は高解像度の画像をリンクしてはっている。新記事にプロファイルをウェブにしている。・配置画像は、すべてPSDにしてリンク埋め込まない、画像補正等はすべてPhotoshopで行う・画像で書き出す部分とHTML+CSSにする部分はパッと見てわかるようにする。ゆうき)さんmotoyamayuki.comhttp://motoyamayuki.com無駄なくスマートな制作をされているなぁと感じる内容でした。画像アセットの話とかProttの話とか、名古屋の田舎者には衝撃的でした。・リンクを設定していく・シェア→URLをクライアントに送る・Prottで改善されるといい点ページ内リンクには対応していない。敦さんpictron.nethttp://pictron.netIllustrator、Photoshopを製品単体で使うのではなく、他のサービスとコラボレーションして使う方法なんて考えたことなかったし、できるとも思っていませんでした。杉山さんのセッションを聞いて、これからのデザインは、自分で煮詰めるものからオープンに知恵を出し合ってするものに変わっていくんだなと感じました。avocode(アボカド)やzeplin(ゼッペリン)のように、デザイン業界のGithub!的なサービスがこれから更に増えていくんだろうなぁ。聞くのに必死過ぎてメモが不完全ですみません。デザインの未来を感じられるセッションでした。書き出しの設定を複数出来る。CChttp://www.adobe.com/jp/products/experience-design.htmlセッションまとめこれからの制作環境はオープンで繋がることがキーでもツールが進化したからと言ってアイデアをだしてはくれないデザインをサポートしてくれる自分にとって楽な技術を選択しましょう。したメモですみません。勉強会の後の懇親会も楽しかったです。