「Shift12：Webデザイン行く年来る年（CSS Nite LP59）」

こちらは、CSS Nite Shift12のフォローアップページです。

Facebookイベントページ

公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。

Twitterやブログなど

ツイートは下記にまとめました。

次のブログで取り上げていただきました。ありがとうございます。

基調講演
中川 直樹（アンティー・ファクトリー）　

「産業や社会、そして人の行動の変化、2020年に向けて何を見据えるべきか?!」

基調講演を担当した中川です。 本講演最後、「AI」は人々（我々）の仕事を奪うのでしょうか？との問いかけで終えましたが、これに対する僕の考えを少しだけ述べさせてもらいます。

人類は今まで、時代をさかのぼると、農業革命に始まり各種産業革命からの情報革命と、都度世界を取り巻く産業構造を変化させてきました。

これは、人間がより良い未来を意識して、数々のイノベーションを繰り返した結果です。

今回、話の中で触れたソサエティ5.0とは、狩猟社会（Society 1.0）、農耕社会（Society 2.0）、工業社会（Society 3.0）、情報社会（Society 4.0）に続く新たな社会です。

ソサエティ5.0に欠かせない「AI」や「ロボット」の技術や運用は、ある日突然、ドラスティックに生まれたものではなく、何十年にも渡る、基礎研究からの開発、事業化、産業化へと発展していってるものであり、コンピューター・テクノロジー、コンピューター・サイエンスであったり、ユザー・インターフェース、ユーザー・エクスペリエンスという概念なども重要な役割を果たしています。

そして、我々webに従事する者の仕事の根本は、クライアントの課題や、社会の問題を解決することであり、その仕組み作りにweb、ICTを利用しているわけですが、それらも先に述べたテクノロジー、概念が共通しており、結果「AI」や「ロボット」との親和性も高いと言えるでしょう。

つまり、今後、仕事上で「AI」や「ロボット」が必要なのであれば、それらを組み込んで応用させていけば良いのです。そのためには、今までと同じことをしていてはダメで、web制作の現場も、一つ先に進まなくてはいけません。 　

それが、本講演で結論づけた「モバイルファーストからAIファーストへ」という提言なのです。

また、日本国内だけのことを考えても、少子高齢化がこの先進みます。生産年齢人口（15～64歳の労働可能な人）が減っていく中、世界に対する経済競争力、GDPの維持を考えると、「AI」や「ロボット」も人に変わる生産活動ができる新たな基準単位として意識していくのであれば、我々の技術力や仕事は、発展とともに更に重要な役割を担っていくことでしょう。 　

【政府広報】ソサエティ5.0 https://www.gov-online.go.jp/cam/s5/

ソサエティ5.0「すぐそこの未来」篇（90秒）＜字幕版＞ https://www.youtube.com/watch?v=gRSB9BxadYs

【内閣府】ソサエティ5.0 https://www8.cao.go.jp/cstp/society5_0/index.html

【総務省イメージムービー】Connect future ～5Gでつながる世界～（3分ver） https://www.youtube.com/watch?v=ArRWXopUHAQ

株式会社アンティー・ファクトリー

中川　直樹

ダウンロード

「webクリエイターのための情報交換所」ダイジェスト番外編
後藤 賢司（よつばデザイン）阿部 正幸（モチヤ）前川 昌幸（オミカレ）

ウェブクリエイターのための情報交換所ダイジェストに参加いただきました、皆さまありがとうございました。

今回のセッションでは2018年1月から、12月までのwebに関するニュースをまとめました。

グループで2018年に共有されたトピックは沢山ありますが、今回はその中から多くの人に聞いていただければと思うものをいくつか選んでピックアップしてお話しました。若干駆け足になってしまいましたが、お時間ある時にスライドを見返していただければと思います。

日々情報に触れていても、時系列やまた別の軸で並べてたり立体的に情報を捉えられれば新たな発見や気づきがあります。

情報を単体でとらえる人と、別の情報とつなげた上で俯瞰から眺める人では世界の見え方が全く異なります。

イベントはいつも複数人体制でやっていますが、それには理由があります。

「同じ情報でも捉える側によって全く価値が変わる」という所に触れたいからです。

ただの振り返りでは無く、デザイナー・フロントエンドエンジニア・エンジニアの「異なる職業の視点から情報を捉える」を大事にしています。

トピックによってはデザイナーに大事だとしてもエンジニアにはピンと来なかったり、エンジニアには重要な出来事でもデザイナーとしてはそうでも無かったりのような事は良くあります。

自分だけの視点では無く、もっと幅広く情報を捉えるきっかけになれば良いなとも考えています。

情報は誰でも調べられますが、どうとらえてどう活用するかで結果は全く変わると思います。

「こんなニュースあったな」という振り返り確認で終わらず、働き方やスキルの方向性、クライアントへの提案等のヒントになれば嬉しいと思います。

第4次産業革命は制作者の世界にも大きな影響を与えるものだと考えています。

時代の流れを読みながら「制作者として依頼者に何を提供出来るのか」の内容は今後どんどん変化していくと考えます。

現在持っているスキルだけでは無い新しいチャンネルを探したり、スキルを応用しながら出来るサービスや商品を考える事も重要だと思います。

私自身まだまだ模索中ではありますが、その辺り含めて日々の情報共有をグループで一緒に出来たら嬉しいです。

webクリエイターのための情報交換所

https://www.facebook.com/groups/241838242545737/

紹介したリンク

今回取り上げたリンクのリストです。

質問

Q. 総務省などの統計で出てくる「企業」とは？（地方の中小企業は含まれていない？）
A. こちらで調べた限りでは明確に企業とはという定義は無かったので、全般を指していると思います。
Q. AIが描いた絵の著作権がどうなるか気になりました。
A. 参考になる記事がありますのでご一読ください。
- [人工知能が作った創作物、現行の法律ではどうなる？ (1/2) - ITmedia NEWS](https://www.itmedia.co.jp/news/articles/1703/16/news016.html) - [AIが作ったコンテンツの著作権はどうなる？--福井弁護士が解説する知財戦略 - CNET Japan](https://japan.cnet.com/article/35115900/)
Q. 多言語化するにあたり、どこまでの言語を対応するのか、誰がくるのかリサーチするものでしょうか。
A. 私（阿部）は、特にリサーチをしたことがありませんでした。 多言語化するにあたり、私のクライアントで多いのが英語と、中国語（繁体、簡体）です。 これでほとんどの人口がカバーできますし、4ヶ国語を対応するのでそれなりの工数がかかります。
4ヶ国語を追加して、まだ余力があるのであれば観光客が多い韓国語を追加するとほんとどのインバウンドがカバーできるのではないでしょうか。 あとはクライアントがどこに向けてビジネスをしているかだと思いますが、今度23ヶ国語対応のサイトを構築します。
Q. モバイルがなかなか早くならないのが悩み、解決方法が知りたい
A. 物理的に早くならない（遅い）原因は一つではなく、例えば 1. 配信しているサーバーのネットワーク 2. サーバーの能力 3. サーバーサイドのプログラム 4. ミドルウェア（ウェブサーバー、データベースなど） 5. コンテンツのデーター量 6. コンテンツのファイル数 7. コンテンツファイルの読み込み 8. ソーシャルのボタンなど、外部のコンテンツ といったことがあります。 その他に、感覚的に早く感じない（もっさりしている）原因は 1. コンテンツが表示されるまでが遅い 2. 初期の表示に必要のないメディア（画像など）を読み込もうとしている といったことがあります。 原因は多々に渡るため、まずはその把握が必要です。 その手助けとなるのは、 - [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) - [Lighthouse によるウェブアプリの監査 | Tools for Web Developers | Google Developers](https://developers.google.com/web/tools/lighthouse/?hl=ja) です。 これらのツールでの診断を参考に遅くなる要因に対応していくのが近道です。 原因がサーバーとなっている場合に、フロント方面で対応しても効果は限定的で、逆も動揺です。まずは原因の把握に努めてください。

Facebookグループへの参加について

今回のイベントを通じて多くの方にFacebookグループへの参加申請をいただいております。ありがとうございます。セッション中にもお話しましたが、管理者から見て申請者のウォールで書き込み等を確認できなければ参加承認をしておりません。理由はスパムアカウントからの申請と見分けがつかないのと、グループとして機能させたいからでもあります（素性が最低限わかる）。

グループのトップに承認の条件を書いていますので承認されてない方は、お手数ですが一度ご確認いただいて設定を変更、あるいはこちらから見える投稿をしていただき（1つだけ投稿のプライバシーを「公開」にするだけでも大丈夫です）再度リクエストをお願いします。

さいごに

CSS Nite Shift12に参加いただきました皆さまありがとうございました。

下記は私たちのソーシャルアカウントです、お気軽にフォローください。

株式会社オミカレ 前川 昌幸

よつばデザイン 後藤 賢司

モチヤ株式会社 阿部 正幸

ダウンロード

ツール
浅野 桜（タガス）、黒野 明子

フォローアップはnoteに掲載。スライドも含まれています。

ダウンロード

アクセシビリティ
植木 真（インフォアクシア）、守谷 絵美（Chatwork）

「アクセシビリティ」セッションを担当したインフォアクシアの植木＆Chatwork株式会社の守谷絵美です。

今年は、「デザイナー視点から考えるアクセシビリティ」をテーマに、守谷さんから体験談や実践事例をご紹介いただきながら、今年話題になったトピックスを振り返ってみました。

スライドのダウンロード

https://bit.ly/2Rdv16b

植木からのメッセージ

私のマシントラブルにより、全体の進行が遅延してしまいました。この場をお借りして、改めてお詫び申し上げます。

さて、今年の「アクセシビリティ」セッションはいかがでしたか？　

ここ1～2年、各地で開催しているセミナーはどこも満員御礼になるなど、Webアクセシビリティへの関心が高まっていることを実感しています。セミナー参加者のアンケートでは「意外と普通のことをやればいいんですね。」、「もっと難しくて面倒なものだと思っていました。」という感想をよくいただきます。

今回のセッションは、ビジュアルデザインに関するお話が中心でしたが、皆さんのコンテンツをより快適に利用してもらえるようになるヒントがいくつもあったと思います。スライドの最後には、守谷さんオススメのツール一覧もありますので、お時間のあるときに是非ご覧になってください。

守谷からのメッセージ

ご聴講くださいまして、ありがとうございます。

今セッションでは最後の方に少し紹介しただけにとどまりましたが、アクセシビリティ対応とは、情報をあらゆる形に変形させながらユーザーに届けられるという、Webの持つ壮大な力を最大に活かすための対応だと思っています。Webブラウザを超えた支援技術のための対応、と思うとワクワクしませんか！

私自身、アクセシビリティの物凄いスペシャリストなわけではなく、基本的なことを地道にこなしていっているだけです。今回はその手法の一部をご紹介して、会場では植木さんと作成した『基本のキ』10項目も配布できました。

できる所からコツコツと進めて、ぜひそれをSNSなどで広めてください。そうすると次のゲストはあなたになるかもしれません、よ！

アンケートでお寄せいただいたご質問への回答

Q1.　 <title>は、サイト内に同じものが複数あってもよいのですか？

例えば、JIS規格（JIS X 8341-3:2016）やW3Cのガイドライン（WCAG 2.0 / 2.1）では、どういうページなのかが分かるようにページタイトルを提供することを基準としています。

必ずしも「同じものが複数」あってはいけないというわけではありませんが、ページの内容が異なれば、自ずとページタイトルも異なるものになるはずです。

もし同じ文言になってしまう複数のページがあったら、改めてページの内容を見比べてみて、それぞれの違いが分かるように文言を補足するなどしてみるとよいでしょう。

ちなみに、title要素の文言は、検索結果ページでもよく使われています。そのため、私はいつもそのページタイトルだけを見て、ユーザーが目的の情報がありそうかどうかを判断できるか？という視点でもチェックするようにしています。

Q2. 北海道から来たのですが、ニトリのNウォームのCMって、全国で放送されてるんでしょうか？

全国かどうかはわかりませんが、東京ではよく放送されています。先日、岡山の知人がたまたまNウォームの話をしていたので、おそらくニトリの店舗があるエリアでは放送されているのではないでしょうか。

Q3. 老人向けのサイトに最適なテキストコントラスト等のおすすめはありますか？

特にシニア層に限定した基準はありませんが、今回ご紹介した4.5：1のコントラスト比はW3Cのガイドラインで定められた基準なので、実質的に世界標準になっているものです。

シニア層は、年齢からくる視力の衰えや白内障などの眼の疾患などで「見えづらい」人が多いです。もしシニア層だけをターゲットにしたコンテンツであれば、ワンランク上の7：1を目安にしてもよいかもしれません。

ちなみに、ワタクシ自身、老眼を自覚するようになってきてからというもの、4.5:1以上の基準をクリアしているコンテンツはとても読みやすいと実感しています。

Q4. アクセシビリティの勉強のしかたを教えてください。

【植木】
まずは、会場でお配りした「Webアクセシビリティ確保 基本の『キ』」を是非活用してみてください。なお、ウェブでは各項目の解説ページも提供していますので、あわせて確認してみると、意外とフツーのことが多いのに気がつくはずです。

【守谷】
私も15年近く前に、植木さんの提唱される基本のキ10項目を確認することから始めて、次にWCAGを読む、という順に学んでいきました。10項目が頭に入っていれば、一見難解なWCAGもとっつきやすく感じると思います。皆さんにも基本のキをお届けできるお手伝いができて、光栄です。

Webアクセシビリティ確保 基本の『キ』
https://bit.ly/weba11y10

以上となります。

それでは、皆さんもう一度いきますよ！？
来年も、アクセシビリティやってくれるかな？

ダウンロード

フォント
関口 浩之（ソフトバンク・テクノロジー）、鷹野 雅弘（スイッチ）

フォントおじさんより

フォントセッションを担当しました関口浩之です。CSS Nite Shift12にご参加いただき、ありがとうございました。鷹野さんとのコンビ、2年目を迎えました。Shift12「フォントの世界」を楽しんでいただけたのならうれしいです。

セッションの中でご紹介したWebフォント導入事例、Webフォント関連お役立ち情報のリンク集を共有します。

当たり前のように普及してきた日本語Webフォントですが、実装方法やクライアントへの提案方法についての質問をいただくことがまだまだ多いです。下記のWebフォント最新事情スライド（138頁）の中で、それらの疑問にお答えしてますので、ぜひ、ご一読ください。

フォントおじさんおすすめWebフォント導入事例 [Best3]

その他、おすすめWebフォント導入事例 [コーポレートフォント編]

Webフォント最新事情スライド（138頁）

Webフォントためし書き

その他、おすすめのフォント関連リンク集

Webフォントに関して、知りたいことや質問があれば、適宜、ご相談に乗ります。FONTPLUS以外の質問でもお答えします。また、お会いできることを楽しみにしています。

Facebook
https://www.facebook.com/hiroyuki.sekiguchi.8/

Twitter
@HiroGateJP

Mail
hsekiguc@tech.softbank.co.jp

鷹野から

関口さんとのコンビ2年目、「フォント」セッションをお楽しみいただけたようで何よりです。

フォントそのものも楽しく、奥が深いものですが、そもそもどうようなテキスト（文字）にするのか、どのように組むのか、つまり、テキスト、フォント、タイポグラフィ（組版）の3つのレイヤーは表裏一体の関係です。

ここ数年言い続けていますが、ゴールはこちらです。

Instagramにて、全国で気になった看板などを取り上げています。
https://www.instagram.com/logosignboarddesign/

Adobe MAX Japanにて松田 直樹さん（まぼろし）のセッションに飛び入りしました。こちらのセッションもオススメです。

Webフォントを120%活用するための基礎知識＆最新動向
https://maxjapan.adobe.com/archive/2018/web-session-5/

リンク集（鷹野）

フォントに関する関心・熱量は昨年に続き高まった

フォントカルタ（1月と10月）
https://fontplus.connpass.com/

フォントの日（4/10実施）
https://fontday2018.peatix.com/
https://type.center/articles/11394
https://www.facebook.com/pg/dtptransit/photos/?tab=album&album_id=1894142460605014

月刊『MdN』2018年11月号『明朝体を味わう。』
https://books.mdn.co.jp/release/61479/

「たてよこWebアワード2017」受賞者決定
https://typography-mag.jp/news/346/
https://tategaki.github.io/awards/

アウトテイク（フォントに関する関心・熱量は昨年に続き高まった）

フォント男子連載
https://type.center/articles/11571

連載「活字・写植・フォントのデザインの歴史 – 書体設計士・橋本和夫に聞く | NewsInsight」
https://biz.news.mynavi.jp/category/font-history

来年の話題：2019年のATypI（国際タイポグラフィ会議）が、東京で開催。テーマは「Rediscover」
https://type.center/news/11324

OSやサービスの充実でフォント環境がいっそうリッチに

macOS Mojaveでカラーフォント

ベテランほど知らずに損してるIllustratorの新常識（12）カラーフォントという新しい道具、そして絵文字
https://blogs.adobe.com/japan/dtp-illustrator-kihon-tips-12/

Windows 10でBIZ UD
https://forest.watch.impress.co.jp/docs/serial/yajiuma/1146398.html

Google Fonts に日本語フォント追加、Noto Sansも。
https://qiita.com/umeume66/items/13e733b0cffef49fab62

タイププロジェクト「TP コネクト」
https://typeproject.com/service/tpconnect

フォントワークス「mojimo」
https://mojimo.jp/info/547/

たづがね角ゴシック
https://www.monotype.com/jp/%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88/%E3%81%9F%E3%81%A5%E3%81%8C%E3%81%AD%E8%A7%92%E3%82%B4%E3%82%B7%E3%83%83%E3%82%AF/

The Neue Frutiger World
https://www.monotype.com/fonts/neue-frutiger-world

Futuraに合う日本語書体

Illustrator CC 2019アップデートまとめ
https://note.mu/dtp_tranist/n/n36249be4673e

FOTクックハンドR
https://webfont.fontplus.jp/font-list/cookhandstd-r
https://fontworks.co.jp/column/archives/31

パンダベーカリー
https://suzukimemo.com/post-6057

かもめ龍爪
https://www.morisawa.co.jp/topic/upg2018/#kamome

さくらぎ蛍雪
https://www.morisawa.co.jp/topic/upg2018/#sakuragi

秀英にじみ丸ゴシック
https://www.morisawa.co.jp/topic/upg2018/#shuei

今年の文字2018

筑紫Q明朝L
https://fontworks.co.jp/fontsearch/item?TsukuQMinLStd-L&word=%E6%96%87%E5%AD%97%E3%81%8C%E3%81%8A%E3%82%8A%E3%81%AA%E3%81%99%0A%E6%96%B0%E3%81%97%E3%81%84%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E4%B8%96%E7%95%8C

貂明朝カラー化
https://blogs.adobe.com/japan/adobefonts-one-year-of-ten-mincho-colorful-updates-and-ten-mincho-text/
https://helpx.adobe.com/jp/fonts/using/ten-mincho.html

NPGクナド
https://www.nipponia.in/fonts/NPG00/

高輪ゲートウェイ
https://www.huffingtonpost.jp/2018/12/05/toranomon-hills-station_a_23608860/?ncid=other_huffpostre_pqylmel2bk8&utm_campaign=related_articles

世界絵文字デー
https://www.apple.com/jp/newsroom/2018/07/apple-celebrates-world-emoji-day/

世界の“今”をダイジェスト 10話「感嘆符」
https://www.netflix.com/title/80216752
https://www.netflix.com/watch/80243761?trackId=200257859

ドルチェ＆ガッバーナの中国向けプロモーション動画の間違い探しクイズ
https://www.instagram.com/p/BqPhUCuiPZM/

Netflix「Netflix Sans」
https://gigazine.net/news/20180322-netflix-unveils-new-custom-typeface/
https://www.itsnicethat.com/news/netflix-sans-typeface-dalton-maag-graphic-design-210318

Airbnb「Airbnb Cereal」
https://gigazine.net/news/20180516-airbnb-cereal-typeface/
https://airbnb.design/introducing-airbnb-cereal/

IBM「IBM Plex」
https://coliss.com/articles/build-websites/operation/design/corporate-font-ibm-plex.html
https://www.ibm.com/plex/

マツダ「MAZDA type PR」
https://www.typeand.net/2018/
https://k-honblog.com/archives/19683036.html
https://k-honblog.com/archives/26465663.html

Domino's Pizza
https://www.monotype.com/resources/case-studies/a-stackable-typeface-for-dominos-pizza/
https://www.underconsideration.com/brandnew/archives/new_custom_type_family_for_dominos_pizza_by_monotype_studio.php

Evernote（Publico）
https://twitter.com/yuki_miyake/status/1029689190412312576

Why Fashion Brands All Seem to Be Using the Same Font
https://www.bloomberg.com/news/articles/2018-11-20/why-fashion-brands-all-use-the-same-style-font-in-their-logos

Brand New: New Logo for Burberry by Peter Saville
https://www.underconsideration.com/brandnew/archives/new_logo_for_burberry_by_peter_saville.php

Text Graphics in Video: Top Trends For 2018
https://youtu.be/XAVhyvdU5JM

こちら訂正とお詫びまで。

良太郎さん

登壇こそされませんでしたが、今回の「フォント」セッションのコンテンツに協力くださった良太郎さんのメモです。
Shift12：2018年フォントの動向 Outtakes - Ryotarox

良太郎

フリーランスのグラフィックデザイナー／アートディレクター。紙媒体を中心に中小企業の課題を相談からデザインによる解決までを受託で行う。

Facebook : https://www.facebook.com/ryotarox

ダウンロード

特別セッション
田口 真行（デスクトップワークス）

デスクトップワークスの田口です。

私は20年前にWebディレクターとして独立してからずっと、ウェブサイト制作をしてきました。しかし、時が経つごとにひとつの不安がよぎります。それは、いち制作会社として抱く「このままでいいのか」問題。

私たちはこの問題に向き合う中、フラストレーションがピークに達したタイミングで、ある決断をしました。それは、「クライアントの依頼にだけ依存した状態」から脱し、「自分たちならではの価値」をもっと追求しようとすること。もちろん、それはクライアントワークの否定ではありません。世の中に溢れる制作会社、世の中にたくさんいるクリエイターの中で、自分たちが提供できること、その価値をもっと追求しようという前進です。

そこで、私たちはまず、自社メディアを立ち上げました。それがライブ配信です。
どうせやるなら、とことんやろうと決め、社内の1室を撮影スタジオ化したマルチカメラを用いた表現で、様々なゲストの方にご協力をいただきながら、4年間で1,000本以上という超コンスタントなペースでライブ配信を実施してきました。

デスクトップワークスのライブ配信
https://webdirection.jp/live/

さらに、そこから次のステップ、制作会社として請負仕事以外の収入源の獲得、「自分たちならでは」のマネタイズを目指しました。
私たちのこれまでの仕事、サイト制作のプランニング手法とマネジメント手法をフレームワークとしてツール化した『Webディレクター手帳』。そして、その思考プロセスを一冊に込めた書籍『ディレクション思考』。これら自社プロダクトをゼロから開発し、製造、販売しました。売上の数字だけみたら、小さなものかもしれません。しかし、今まで世の中に存在しなかった「自分たちならではのマネタイズ」の仕組み、他の制作会社にはないその仕組みを手にしたことは、とても大きな一歩です。

Webディレクター手帳
https://webdirection.jp/tools/

書籍『ディレクション思考』
https://webdirection.jp/book/

当時、製造工程や梱包作業の様子、また手渡し配達イベントの様子をライブ配信で流したのですが、その中継を見たユーザーが、その瞬間に商品を買ってくれる！という現象を目の当たりにしました。一連の流れを「ストーリーとして」ユーザーに届けることの重要性、そしてライブ配信の可能性をさらに感じた瞬間です。

さらに、私自身のセミナー活動をライブ配信と掛け合わせた新しい学びのサービス、実践学習型オンラインサロン『4LDK』を立ち上げました。このオンラインサロンは、全国各地のディレクターやクリエイターが場所を問わずして参加できる「学びの場」です。知識やノウハウをインプットするだけじゃなく、自らのものとしてじっくり消化するアウトプット学習にも取り組める今までなかった学習サービス。ただ講義を視聴するだけじゃなく、率先して行動する積極的なスキルアップに取り組んでいます。

実践学習型オンラインサロン『4LDK』
https://webdirection.jp/4LDK/

来年はこの取り組みをさらに進化させて、私以外の、様々な分野の専門家たちを講師に迎えて展開する『現場学校』がスタートします。一過性のイベントごとになりやすいセミナーと、参加者それぞれの現場とをライブ配信を用いた「学びで繋ぐ」試みです。

ライブ配信セミナー『現場学校』
https://gbgk.jp

さて、今回はいち制作会社が抱える「このままでいいのか」問題を切り口にお話しをしました。マネタイズと言うと「お金儲け」のイメージが強いですが、私たちにとってマネタイズとは、自分たちの価値を見える化すること、そして市場に示すための具体的行動です。

今回のセッションが、参加者それぞれの自分らしいクリエイティブな価値の追求、不安をキッカケに見いだされる「新たなる希望」となれば嬉しいです。

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

田口真行のFacebook
https://www.facebook.com/TaguchiMasayuki
↑フォローや申請はお気軽にどうぞ！

■セミナーフォローアップ特番、ライブ配信決定！

2018年12月29日（土）22:00〜23:00、田口セッションのフォローアップ特番を生放送のライブ配信で開催します。今回のセッションを振り返りながら、参加者の方から寄せられた質問や「この話、もっと聞きたい！」というリクエストの声にお応えします。どうぞお楽しみに！

https://www.facebook.com/webdirectorshool/videos/2482451701796592/

※画面上の「リマインダーを設定」をクリックすると、配信前に通知が届きます。

ダウンロード

Webデザイントレンド
原　一浩（グレーティブ）、矢野 りん（バイドゥ）

原さんから

Webデザイントレンドを担当しました原です。
CSS Nite Shift 12にご参加いただきありがとうございました。

僕自身Shift 1からWebデザイントレンドを担当していますので、今年で12年目になります。

ただ、12年もやっておりますと、だんだんと過去の傾向からの引用も増えたりして、ハイコンテキストなセッションとなってしまう場面もあります。今回は、ちょうど今年より構成を刷新したので、フォローアップメールでも改めて、ランキング策定までの流れを書いてみます。

今年からランキングというキャッチーな形式にてトレンドを紹介しています。今までは1年間で多く使われたデザインの傾向に対して名前をつけ、それを各カテゴリーごとに発表していくという形式でした。これはいってみれば定量的な調査で、多く使われたデザインであれば取り上げるという形です。

ただし、この方法だと、翌年に向けた話をするという展開がやりづらく、多く使われた手法ではないけれど、時代の流れを反映しており、明確な根拠を示せるわけではないけど「きざし」を感じさせる傾向についてはこぼれおちてしまっておりました。

今年は、ランキングということで、各出演者の目により頼る形式として、定性的な側面からランキングをお届けしてみました。定性的なランキングですから100人いれば100様な傾向になると思います。なので、本セッションの資料は「あの人はああ言っているけど、自分は…。」みたいな感じで一エビデンス程度に利用して来年について考えてみてください。

僕からは、今回セッション中に紹介したランキングの完全版をここでお届けします。紹介しなかった10位から8位はコメント付きでお届けします。それでは、皆さんよいお年を!

Web デザイントレンドセッション観点の完全版ベスト 10

海外 Web サイト

Rank 10
Euroformat
https://euroformat.com/en
マイクロインタラクションに業種ならではの意味のあるサイトが増えてきました。例えばこのサイトはエレベーターを彷彿とさせるパララックスとなっています。

Rank 9
It Will Glow
https://itwillglow.co.uk
2018 年の今っぽさを感じさせるという点で矢野さんに選出いただいたものの、当日解説できず選外となりました。

Rank 8
iconwerk
https://iconwerk.com
矢野さんはアイコン職人に注目していました。このサイトは、グローバル企業をクライアントとして数多くのアイコンを手がけています。

Rank 7
Clorova
https://clorova.com

Rank 6
hourly, ios app for time tracking
https://hourly-app.com

Rank 5
Festive Folks
https://festivefolks.com

Rank 4
Bond
https://bond.backerkit.com

Rank 3
Teatr Lalka
https://teatrlalka.pl/en

Rank 2
Bates Creative
https://batescreative.com

Rank 1
MIT - Massachusetts Institute of Technology
https://web.mit.edu

グローバル企業

Rank 10
Procter & Gamble Company
https://us.pg.com/
フルーセルという画面全体でカルーセルをするという表現を以前紹介しましたが、このサイトは無限にフルーセルしていきます。

Rank 9
Tyson
https://www.tyson.com/
ジューシーな食品を扱う会社のサイトは、Tasty などに代表されるメルトな表現にリニューアルする傾向が増えました。

Rank 8
America Movil
https://www.americamovil.com/
英語の方がWebフォントのメリットがはっきりする気がします。読みやすかったりわかりやすかったりという矢野さんの評。

Rank 7
State Farm
https://www.statefarm.com/

Rank 6
AutoNation
https://www.autonation.com/

Rank 5
Jardines
https://www.jardines.com/

Rank 4
Groupe Eiffage
https://www.eiffage.fr/

Rank 3
Bayer
https://www.bayer.de/

Rank 2
Sanofi
https://en.sanofi-aventis.com/

Rank 1
Delta
https://www.delta.com

上場企業

Rank 10
栃木銀行
https://www.tochigibank.co.jp/
ネットバンキング推しのナビゲーションをはじめ、様々な仕掛けにて攻めています。

Rank 9
ワタベウェディング
https://www.watabe-wedding.co.jp/
これほどスマホサイトの大きい版としてリニューアルされた上場企業サイトもないのではというほどモバイルファーストが徹底されています。

Rank 8
高田機工株式会社
https://www.takadakiko.com/
このサイトは、非常にオールドスタイルなデザインでずっときていたのですが、一気にリニューアルしました。建築業のサイトが華々しくリニューアルされるという傾向は近年続いています。

Rank 7
フジ日本精糖株式会社
https://www.fnsugar.co.jp/

Rank 6
東和薬品
https://www.towayakuhin.co.jp/

Rank 5
ユニマットライフ
https://www.unimat-life.co.jp/

Rank 4
保土谷化学工業株式会社
https://www.hodogaya.co.jp/

Rank 3
アース製薬
https://www.earth-chem.co.jp/

Rank 2
中央紙器工業株式会社
https://www.mcpack.co.jp/

Rank 1
プリマハム
https://www.primaham.co.jp/

自治体サイト

Rank 10
幸手市
https://www.city.satte.lg.jp/
せっかく中国語が選べるのに、中国国内から開こうとすると Google フォントの API を叩いているだけで二分はかかってしまうという点でいろいろな示唆のあるサイトとなりました。

Rank 9
海老名市
https://www.city.ebina.kanagawa.jp/
神戸市のサイトより広まったコンシェルジュという手法ですが、より一歩前進させた感のあるリニューアルです。

Rank 8
湧水町
https://www.town.yusui.kagoshima.jp/
ついに自治体もトップページのメインイメージエリアとして、ドローンによるフルサイズのビデオを掲載してくるような時代になりました。他にも玄海町でも空撮によるフルビデオがメインムービーとして使われています。

Rank 7
京丹後市
https://www.city.kyotango.lg.jp/

Rank 6
玄海町
https://www.town.genkai.lg.jp/

Rank 5
大和村
https://www.vill.yamato.lg.jp/

Rank 4
三戸町
https://www.town.sannohe.aomori.jp/

Rank 3
伊勢崎市
https://www.city.isesaki.lg.jp/

Rank 2
真岡市
https://www.city.moka.lg.jp/

Rank 1
福山市
https://www.city.fukuyama.hiroshima.jp/

原 一浩 (はらかずひろ)

矢野さんから

Web デザイントレンドを担当しました矢野です。
CSS Nite Shift 12 にご参加いただきありがとうございました。
フォローアップとして矢野が選んだ平成最後のデザイントレンド各カテゴリベスト10を共有します。普段製品開発とプロモーションの両方を現場で手がけている人間なりの視点から、一言解説も追記しています。
自治体編の奄美大島 大和村に使用されていたフォントの種類は「こはるいろサンレイ」でした！
セッション当日ドヤ顔で「レトロ感のある看板文字風」などと解説しましたが、
アニメ「きんいろモザイク」のロゴにある「ハロー！！」の部分からインスパイアされて作られたフォントだそうです！！全然方向性が違いましたね〜〜。
https://fontfree.me/2285?fbclid=IwAR1N0bF4crKZY77N1WoXKzsYRcVvMx5BAbY29xHw2yLWNOm2zW9956-WgLQ

矢野が選んだ平成最後のデザイントレンド各カテゴリベスト10

海外 Web サイト

Rank 10
Bond
https://bond.backerkit.com/
アノニマス系はほんとに流行りました。目を描き入れないのがポイント。

Rank 9
PIND
https://pind.univ-tours.fr/
あっさりパンク！新しいパンクファッションのスタイル。

Rank 8
The Gerald
https://thegerald.com.au/
エフェクトちょうどいい。多すぎるのもうるさいですよね。

Rank 7
TEATR LALKA
https://teatrlalka.pl/en
Cookie確認斬新です。マジメなデザインじゃタップ率は上がりません。

Rank 6
BARREL
https://www.barrelny.com/recap/2017
クリエイティブぶっとんでます。ほとんどアート。

Rank 5
iconwerk
https://iconwerk.com/
アイコン職人という１点突破の業態に脱帽。

Rank 4
ELEVATOR
https://elevatorstrategy.com/
Chromeか！！平均点に収まらない操作性

Rank 3
It Will Glow
https://itwillglow.co.uk/
2018年の今っぽさ。セオリーに沿いながらはみ出す高度なセンス

Rank 2
hourly
https://hourly-app.com/
ブランディングとして斬新。アプリのプロモーションという枠組みから出ている

Rank 1
BASECREATIVE
https://batescreative.com/
ナナメギミック！構図がナナメなだけですが、発想が素敵

グローバル企業

Rank 10
P&G
https://us.pg.com/
こんなにスマホを擦ったことは無い...こんなデザイン提案を超コンシューマ向けのサイト制作で突き通すのもプロです。

Rank 9
america movil
https://www.americamovil.com/
英語の方がWebフォントのメリットがはっきりする気が。Condensed書体使いがポイントですね。

Rank 8
Mcdonalds
https://www.mcdonalds.com/us/en-us.html
全部バナー！文字ほぼなし！理想的だけどスタイリッシュでブランド力のあるバナーの運用は案外コストが高いです。さすが世界屈指の企業。

Rank 7
Renault
https://group.renault.com/en/
矢印の形が目線異動を楽にしてくれます。小さい工夫が光る。

Rank 6
Bayer
https://www.bayer.de/de/homepage.aspx
色がすごい..！これでもまとまる画面に仕上げきるデザイナーの力量を感じます。

Rank 5GM
https://www.gm.com/
下にメニューは大きい画面のスマートフォンでとても便利。今後もっと増えて良い設計。

Rank 4
Autonation
https://www.autonation.com/
ハンバーガーメニューならぬ道路メニュー！！遊び心の極み。

Rank 3
Jardines
https://www.jardines.com/
彩度がうんと高い色は、スマホの繊細な発色にピッタリ。かつ、今のティーンのトレンドにマッチしています。人と同じじゃつまらない！

Rank 2
Royal Mail Group
https://www.royalmailgroup.com/en/
スマホでちょうどいい文字量とはまさにこんなかんじ。でもコピーライティング能力が問われるから簡単じゃないんですよね。

Rank 1
DELTA
https://www.delta.com/
スマホでちょうどいいジャンプ率ー！大きさの差で目の移動を促しています。

上場企業

上場企業
Rank 1
アース製薬
https://www.earth-chem.co.jp/
キャッチーなビジュアルが最初にドーンと来るっていうのは正義ですね..。お金はかかるけど...

Rank 2
プリマハム
https://www.primaham.co.jp/
シズルのある写真で商品商品をしっかり見せるっていうのは大事。そして細部にそっと隠された遊び心の数々に、デザイナーが楽しんで制作したことがわかります。

Rank 3
保土谷化学
https://www.hodogaya.co.jp/
1ページで会社の特徴を説明しきっていて素晴らしい構成力。

Rank 4
中央紙器工業
https://www.mcpack.co.jp/
ァーストビューで端的にコンテンツの説明をして詳しく見るを押させようとするレイアウトとコピーライティングのバランスの取れた感じがすごい！

Rank 5
日本M&Aセンター
https://www.nihon-ma.co.jp/
色の統一感とか文字サイズのコントラストとか、スマホに最適化した構成のサンプルのようです。

Rank 6
東和薬品
https://www.towayakuhin.co.jp/
ジェネリック気になる人にちゃんとターゲティングした内容。ユーザ調査力のあるマーケティングチームが実力を発揮しているデザインです。

Rank 7
栃木銀行
https://www.tochigibank.co.jp/
ネットバンキングのメニューが上に固定する仕様が素晴らしい。スマホWebのUI設計のお手本

Rank 8
CROPS
https://www.crops.ne.jp/
キャンペーン告知のバナーがバンバン出てくる盛りだくさん感が良いですね！

Rank 9
高田機工株式会社
https://www.takadakiko.com/
昨年からのリニューアルぶりがすごい！！

Rank 10
西部電気工業株式会社
https://www.seibu-denki.co.jp/
読み込みがめっちゃ速いんです。やはりスマホサイトで最も大切なのは表示速度....5Gになったらそんなことどうでも良くなるかもですが、今は避けられない工夫だということを忘れずに〜〜

自治体サイト

Rank 1
北海道厚真町
https://www.town.atsuma.lg.jp/
災害情報がスマホに最適化されています。災害時活躍するのはPCではなくどう考えてもスマートフォン。

Rank 2
広島県呉市
https://www.city.kure.lg.jp/
災害版/通常版運用の例

Rank 3栃木県真岡町
https://www.city.moka.lg.jp/
ビジュアルデザインがとても丁寧に作り込まれています。いちごのブランド力を街を上げて作っているという気概を感じます。

Rank 4
鹿児島県湧水町
https://www.town.yusui.kagoshima.jp/
トップページにYoutubeをガッツリ貼っている振り切り感が凄い。また、そのようなサイトが他にあまり見かけないことから上位にプッシュしました！

Rank 5
広島県福山市
https://www.city.fukuyama.hiroshima.jp/
縦バナー！！単に縦に組むだけで、重要なことがより重要に見える効果と、他に類を見ない個性化につながるとは驚かされました。

Rank 6
佐賀県玄海市
https://www.town.genkai.lg.jp/
閑静な田舎町に英語のキャッチコピーというギャップを高く評価します。

Rank 7岐阜県白川町
https://www.town.shirakawa.lg.jp/
白川町よりフッター街のほうが都会！！遊び心が見えるデザイン。

Rank 8青森県三戸町
https://www.town.sannohe.aomori.jp/
IPを全面に使っている！サザエさんや鬼太郎などIPで地域を盛り上げる例は多いですが、ここまで全面的に活用しているのは珍しいかも。親しみやすく物語に共感を求めやすいからかな？

Rank 9
熊本県長洲町
https://www.town.nagasu.lg.jp/
観光情報にラーメン屋や焼肉屋の情報や住所が写真もなくポロっと乗ってるのが面白かったです。

Rank 10
埼玉県幸手市
https://www.city.satte.lg.jp/
中国語が選べます。が、GoogleフォントのAPIを叩いているだけで中国国内から閲覧すると表示までに２分はかかるので注意が必要です。

矢野りん

Twitter : yanorin (https://twitter.com/yanorin)

ダウンロード

まぼろし

採用募集のお時間をいただきました、まぼろしの益子です。

よく「高いスキルが必要なのでは？」と聞かれるのですが、等身大のスキルでまったく問題ありません。

興味のある方は、ぜひお問い合わせください。

ご存知のまぼろしスタッフがいらしたら、直接お声がけいただいてもかまいません。

ご応募、お待ちしております！

ウェブマーケター／ディレクター募集
https://www.wantedly.com/projects/215069

フロントエンドエンジニア募集
https://www.wantedly.com/projects/219772

ダウンロード

cssnite marketplace「FONTPLUS＋フォントワークス」から

フォント祭りブースを開催しました「FONTPLUS & フォントワークス」です。ご来場いただき、ありがとうございました。

日頃のご愛顧に感謝して「フォントおじさんトートバッグ」（FONTPLUS製）と「筑紫書体見本帖」「筑紫書体十五周年記念カレンダー」（フォントワークス製）を、ためし書きシェアやアンケート回答していただいた方に配布いたしました。

楽しんでいただけたようで、うれしいです。

WebフォントのFONTPLUS、LETSのフォントワークスでは、今後も、ウェブサイトのブランディングや世界観に合った書体を提供し続けたいと思っております。

Shift12参加者限定でご用意しました「LETS入会金0円キャンペーン」の申込期限は2019年1月末までです。ぜひ、ご検討ください。

今回のフォント祭りブースに関連したリンク集を共有いたします。

FONTPLUS関連（ソフトバンク・テクノロジー）

FONTPLUSためし書き
https://webfont.fontplus.jp/

FONTPLUSためし書きの遊び方ガイド
https://bit.ly/shift12fontplus

日本語Webフォントお役立ち情報（FONTPLUS編）
https://bit.ly/fontplus

LETS関連（フォントワークス）

LETS
https://lets-site.jp/

mojimo
https://mojimo.jp/

筑紫書体シリーズ（フォントワークス フォントコラム）
https://fontworks.co.jp/column/archives/30

筑紫書体のアンカーポイントの少なさ
https://twitter.com/tsukushi55/status/915088746202071040

筑紫書体の魅力について（もじもじトーク 2017.3.9寄稿）
https://bn.dgcr.com/archives/20170309140100.html

NHK『プロフェッショナル 仕事の流儀』藤田重信(2016.6.13放送）まとめ
https://togetter.com/li/987342?page=81

お問合せ窓口

Facebook
https://www.facebook.com/hiroyuki.sekiguchi.8/

Twitter
@HiroGateJP

Mail
hsekiguc@tech.softbank.co.jp

お問い合わせ

ご不明点やお気づきの点がありましたら、フォームからご連絡ください。

お問い合わせ

このページの上部に戻る