Shift10のフォローアップページです。
公開ポリシー
このページは、本イベントの参加者(およびフォローアップ参加者)限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。
- ID/パスワードの情報はツイートなどされないようにお願いします。
- CSS Niteのコンテンツの再利用について
ツイートは下記にまとめました。
動画について
ダウンロード期限があるものもありますのでご注意ください。
- OS X Yosemite+Google Chromeの組み合わせでダウンロードができないことがあるようです。お困りの場合には、異なるブラウザーでお試しください。
Facebookイベントページ
告知ページへの追記事項などはFacebookイベントページにて随時お知らせしていきます。
基調講演/長谷川 恭久
基調講演を担当した長谷川です。
当日は長丁場おつかれさまでした。
始めて参加した方、久しぶりに参加した方もいらっしゃると思いますが、Shift はいかがだったでしょうか?
「作り続けて世に出す」ということ。これはとてもシンプルなメッセージですが、実践するのは簡単ではありません。ソーシャルメディアで同業者に役に立つ情報を発信するのも「コンテンツを作る」ことですから、それも合わせると、私はほぼ毎日、数回に渡ってやっていることになります。そこまでやる必要はないですが、作り続けることは生半可ではできないことだと思います。また、世に出したところで人が見てくれるとは限りません。ブログを書いたことがある方は知っていると思いますが、最初は 2 桁見に来てくれたらラッキーなわけです。なかなか見てもらえないから諦める方もいると思います。けど、それでも続けているから読んでもらえることもあるでしょうし、読者が増えなかったとしても、自分のライティングスキルが上がるのは間違いありません。
昨年になりますが、「#sticky50」という付箋紙に毎日何か描くというプロジェクトをしました。お盆を跨いで実施したのでサボってしまうタイミングが所々にありました。それでも続けることで、わずか 50 枚でも自分の絵に変化が見られましたし、同業者だけでなく、自分とは少し離れた存在の方と接点を持つこともできました。「続ける」は言うのは簡単です。けど、実行するのはとても難しいわけです。けど、実行できる人にだけ味わえる結果は必ずあります。
手を動かすことでしかスキルアップができない職ですから、ぜひこれからも作ることを挑戦し続けてください。応援しています!
もし何かメッセージ、質問がある方はソーシャルメディアで声かけてください。必ず返信します。
https://www.facebook.com/yhassy
https://twitter.com/yhassy
余談になりますが、iPad でプレゼンしていたときに使ったアプリは「Procreate」と言います。
Twitterで公開したスライドの動画も Procreate にある書き出し機能で作りました。
https://twitter.com/yhassy/status/810002793649950720
マークアップ/小山田 晃浩 (ピクセルグリッド)、久保 知己(まぼろし)
小山田 晃浩さん(ピクセルグリッド)から
マークアップセッションを担当した小山田です。
「○周年の節目の年」ということでお伝えいたしましたが、いかがでしたでしょうか?
IE対応は来年から本格的に11に移っていくと考えています。 そうしていく中で、CSS Flexbox、CSS Animation、SVG、ES6、WebGLなどCSSやJavaScriptで これまで使ってこなかった機能も解禁されることになります。
慣れていると「古いやり方」を続けてしまいがちですが 新しい技術も取り入れると、より効率のいいコードを書けるはずです。
ぜひ、配布するスライドを見直して2016年のおさらい、2017年の動向を確認してみてください。
いただいた質問
どうやって情報を集めていますか?
日々さまざまなブログ(日本語/英語)をチェックするようにしています。 また、私自身も勉強中の身ですので、技術系の勉強会には積極的に参加するようにしています。
更新頻度が高く、特に参考にしているページの例
コードグリッドについて
セッションの最後に話題に出した内容ですが、私の会社(ピクセルグリッド)では マークアップ/フロントエンドのエンジニアさん向けメディアを配信しています。
連載の1回目は未登録でもお読みいただけますので、ぜひお試しください
その他多数
久保 知己さん(まぼろし)から
マークアップセッションを担当した久保です。
今年は様々な仕様やライブラリなどの節目の年でした。
マークアップセッションで、はじめて聞く内容もあったかと思いますが、実は仕様や機能などは、数年前から話題になっていたものが多いです。
ブラウザの進化によって、HTMLやCSS、SVGなどの新しい技術が、徐々に使える状況になっていたり、ライブラリやSassといったツールも、web制作のプロセスにおいて浸透してきています。
今年は素晴らしいwebテクノロジーが、実案件でも使える環境が揃ってきたといえる年でした。
来年、新しい技術はそれほど出ないと思っています。
それよりも、アクセシビリティとどう向き合うか。または新しく使えるようになった技術を、どう安定させるのかなど、現状を見つめ直す時期に入ると予想しています。
今、何が足りていないのか。今後、どういう方向に伸ばしていきたいのか。
マークアップセッションを通して、参考にしていただけると幸いです。
ありがとうございました。
ツール/石嶋 未来(ザ・マーズナレッジ)、鷹野 雅弘(スイッチ)
鷹野 雅弘(スイッチ)から
参照リンク
OSとハードウェア
- 鈴木淳也の「Windowsフロントライン」:強引なWindows 10アップグレードに不満噴出でやっと折れたMicrosoft (1/2) - ITmedia PC USER
- MS、「許可なくWindows 10に更新された」とする訴訟で1万ドルの賠償金 - CNET Japan
- Microsoft、かつてないほど多くの人がMacからSurfaceに乗り換えていると発表 | gori.me(ゴリミー)
- MacBook Pro Late 2016レビュー: おっとTouch BarとUSB-Cの悪口はそこまでだ | Stocker.jp / diary
アドビ
- えっ?2016じゃないの? 混沌を極めるAdobe Creative Cloudのバージョン番号 - DTP Transit
- CC 2017、そしてAdobe MAX 2016 - DTP Transit
- ようやく、ようやく、ようやく!実装されたIllustratorの文字選択関連の機能強化 - DTP Transit
- Photoshop CC 2015.5の新機能は便利なのがいっぱい!正確な切り抜きや選択範囲を作成するのが簡単ですごい! | コリス
- Adobe MAXにてIllustrator CC 2017の最新機能発表をキャッチしてきました! | Adobe Creative Station
- ベテランほど知らずに損してるIllustratorの新常識(1)インターフェイス総点検 | Adobe Creative Station
XDオシ
まとめ
石嶋 未来さん(ザ・マーズナレッジ)から
ソフトに触れていると、開発者の「こういう風に使って欲しい」という思いが見えるときがあります。
そうすると、使っているソフトで実現が難しい・手間がかかるものは「きっとそういうのは想定していないんだな」と想像でき、素直にソフトの得意な部分を活用しようと思えます。
無理に新しいソフトを使う必要はありませんが、日常の作業で「手間がかかるな」と思った時は、新しいソフトとの出会いのチャンスかもしれません。マイペースに出会いを楽しんでいけるといいですね。
■いただいた質問
Q. Affinityシリーズを「webデザインに興味ある」「サブスクリプション以外のソフトないの?」レベルにすすめていいもの?
A. 現在は操作方法のマニュアルなどが日本語化されていないので、個人の方が書かれているブログなどが日本語で得られる情報の中心となってしまいます。
そういった状況から、まったくの初心者さんに独学から進めるのには少しハードルが高いとは感じています。
しかし、ツールやウェブサイトはローカライズされているので、1年ほどで日本語の情報ソースも充実してくるのではないでしょうか。
Adobeシリーズで培った経験がそのままAffinityシリーズに活用できることが多々ありますので、Photoshopなどの経験者と一緒に触れていくというのが好ましいと思います。
アクセシビリティ/植木 真(インフォアクシア)、千貫 りこ
植木 真さん(インフォアクシア)から
インフォアクシアの植木です。
今年も全国各地で「Webアクセシビリティの学校」というセミナーを開催するなどしてきた中で、「アクセシビリティ」というと、どうしても身構えてしまっている人、普段ならやらない特別なコトというイメージを抱いている人が、まだまだ多いと感じた1年でした。
そこで、「2016年のうちに再確認しておきたいキホンの『キ』」と題したセッションを、実際に弊社の情報提供サイトの制作を担当していただいた千貫りこさんをゲストにお迎えして、ご自身の体験談を語っていただくカタチでお届けしました。
初めて知ったこともあったと思いますが、すでに実践していたこともあったのではないでしょうか。アクセシビリティは「"0" か "100" か("All" or "Nothing")」ではありません。より多くのユーザーがより快適に利用できるように、まずはできることから実践していくとよいと思います。
スライド(暫定版)は、以下のURLからダウンロードできます。
https://www.infoaxia.co.jp/shift10.zip
注)後日スクリーンリーダーにも対応したアクセシブルな最終版に差し替えます。
なお、zipファイルの中には「アクセシビリティ-キホンのキ-チェックリスト.xlsx」というExcelファイルも入っています。こちらは、実例のTipsをもとにしたセッションの内容とは異なりますが、やはりキホンの『キ』といえる一般的なチェック項目を10項目挙げています。Excelファイルですので、実際に使いながら、自由にカスタマイズなどしていただければと思います。
今回は「Shift」に初めて参加された方が約4割いらっしゃいました。最後の動画には呆然とされたかもしれませんが、「アクセシビリティ」のセッションの最後はあのように締めるのが毎年恒例になっておりまして、来年もよろしければ是非...(苦笑)
それから、動画の中だけで取り上げた「文字サイズ変更ボタン」について、念のため以下のURLにて詳しく説明していますので、こちらも参考にしてください。
【質問】文字サイズ変更ボタンを提供しなければいけないの?
https://weba11y.jp/basics/faq/resize-text/
また、これをきっかけに勉強してみたいという方、ぜひ「Webアクセシビリティの学校」でキホンの『キ』をさらに掘り下げて、自分ならまず何からできそうかを一緒に考えてみましょう。来年も全国各地で開催してまいります。
来年も皆さんとアクセシビリティを考えるきっかけを作っていきます。またお会いしましょう!
千貫 りこさんから
千貫です。
10年以上前にアクセシビリティの考え方を知り、「“誰かのため”になりたい」という思いで勉強を始めましたが、Webの利用環境が多様化した今、アクセシビリティの確保は“自分のため”にも不可欠なものとなりました。
「スマホ対応」が特別でなくなったように、「アクセシビリティ対応」がサイト制作における当然の要件になる日は近いと思います。
「エー イレブン ワイ」(https://weba11y.jp/) の制作をお手伝いできたことは、私にとって2016年の重大トピックでした。WAI-ARIAなどへの理解が深まったことはもちろんですが、何より、細かい点にいたるまで植木さんとトコトン話し合えたことが大きな収穫です。クリエイターとして、(アクセシビリティに限らず)常に「よりよい解」を求める姿勢を忘れてはいけないな、と再確認できました。
2017年もみなさんと一緒に進んでいくつもりです。
マーケティング/益子 貴寛(まぼろし)、安達 里枝(スマイルファーム)
益子 貴寛さん(まぼろし)から
マーケティングセッションを担当した益子貴寛です。
みなさんのうちで少なくない方と同じように、わたし自身も5年くらい前までは、マーケティングにまったく興味がありませんでした。
よいものは黙っていても勝手に売れていく、マーケティングなんて必要ない、と。
Appleの創業者、故スティーブ・ジョブズが、マーケティング(という言葉が)嫌いだったのは、あまりにも有名な話です。
でも、マーケティングの本来の意味は「市場創造」です。そして、Appleほど新しい市場を創造した会社は、めったにありません。
言葉に振り回されず、あるいは、印象だけで毛嫌いせずに、マーケティングに関する話題に付き合っていきましょう。
- - - -
奇数月に、実案件にもとづいて本音でトークするイベント「ヨルカイ」を開催しています。
11月の第1回は、たにぐち まことさんと「見積書の本音」というテーマで話しました。
1月の第2回では、田口真行さんと「クライアントワークのホンネ」というテーマでトークします(満席、キャンセル待ちのみ受付中)。
https://yorukai.connpass.com/event/45778/
開催情報に興味のある方は、Facebookページをフォローください。
安達 里枝さん(スマイルファーム)から
マーケティングセッションに登壇させていただきました安達です。
新潟の燕三条は、実は今世界が注目するものづくりのまち。Apple創業者のスティーブ・ジョブズが禅を学ぶために6ヶ月間滞在した寺が新潟の燕三条にあります(ちなみに我が家の菩提寺です)。ジョブズもこの新潟への滞在時に燕三条のものづくりに触れ、インスパイアされたのだそうです。
そんなものづくりの中心地で日々感じるのが、今成果を上げ注目されている企業が行ってきたことは、「ユーザーの気持ちに寄り添った商品づくりやコンテンツづくり」を実践してきたということ。企業の理念を伝え、価値として捉えてもらうために何をすべきかを徹底的に考え、磨いているのです。それこそが企業にとってのマーケティングなのです。
ウェブデザインも、そんな企業の理念や価値を伝え、ユーザーの気分を高めるためのひとつのコミュニケーションツールであり、企業のマーケティング活動の一部なのだと思っています。だから、ウェブデザインとマーケティングは切り離すことができないのです。
ウェブサイト上に表現された文章も、デザインの要素も、検索結果からサイトへ流入するまでの行動も、サイトが表示されるまでの速度も全てユーザー体験に含まれるもの。アクセス解析は、ユーザーの声にならない声を推し量る手段です。
マーケティングを知ることは、制作のどんな場面においても武器になるのではないかと感じています。確かにマーケティング用語はややこしい・・・と私自身も感じますが、マーケティングそのものは、ワクワクする世界です。気になる方はぜひ覗いてみて、触れてみていただけたら幸いです。
============================
ウェブサイトの表示速度・パフォーマンスに関しては、
この分野の専門家であり日本のトップランナーである竹洞氏と番組をやっています。
会員登録で無料視聴できますので、ぜひご覧ください。
https://analytics123.net/
============================
ありがとうございました。
株式会社スマイルファーム
安達里枝
▪︎質問への回答
Q アクセス解析ツールのpiwikは遅延要因にはならないのか?
A 厳密に言えば遅延要因です。しかし、piwikはその遅延要因をできるだけ排除する術を施せるのがポイントです。GoogleアナリティクスやGoogleタグマネージャーのタグは、自分ではコントロールできないことが問題なのです。
Q Googleアナリティクスとpiwikのダブル使いは尚更遅延するのでは?
A サイトそのものの遅延要因を排除できない環境で、ダブルで導入することはお勧めしません。(当然遅延します)まずはウェブサイトそのものを高速化したうえで、piwikの設置環境を考えて導入してください(外部サーバでの設置も可能です)。
スマホUI/佐藤 洋介(サイバーエージェント)
初めてのShiftということで、得意分野であるスマホUIのセッションを担当させて頂いた佐藤です。
日々進化する技術やユーザーリテラシーの向上に伴い、ここ数年で瞬く間に進化してきたスマホアプリ。
セッションを通して、アプリ制作に携わる方はもちろん、Web制作などにも通づるUIデザインのヒントを1つでも多く皆さまにお持ち帰り頂けていたら幸いです。
また来年も呼んでいただけるよう、サイバーエージェントとして2017年も良いモノ沢山作っていこうと思います!
■いただいた質問
どうやってインプットしてますか?
実は非常に地味です。
App Store、Google Playの「おすすめアプリ」を毎週見ながら、新しいアプリをとにかく片っ端からインストールしています。
最近はiPhoneの容量が増えたので、大量のアプリがあっても消さずに残せるようになりました。
また、登壇後の質問でもありましたが、「アップデート文をきちんと読む」とサービスのトレンドが掴みやすいです。
プロトタイピングの今後と、サービスデザイナーが担うべき役割は?
突然すぎるPixateの終了から、早いモノで2ヶ月が過ぎようとしています。
しかしその間にも、ツール同士が合併したり、大幅な機能アップデートがあるなど、様々なツールが目まぐるしい進化を遂げているのが現状です。
セッションでも紹介しましたが、「開発フェーズに合わせてツールを選定する」ということが我々サービスデザイナーに今後求められる必須スキルであるとともに、「プロトタイピング」の結果をスムーズに本開発に移行できるかどうかが腕の見せ所になってくると思います。
こう聞くとデザイナーが担う役割がどんどん広がってきているように感じますが、開発環境がどれだけ変わっても「ユーザーの目に触れ、心地よい体験を提供する」のが「デザイナー」の役割であって、高度なプロトタイピングはあくまでもそのゴールに向かうための手段の一つであるということを忘れてはならないと思います。
フォント/鷹野 雅弘(スイッチ)、山田 敬美(ピクセルグリッド)
参照リンク
昨年の復習
絵文字、アイコン、ロゴ
- アップル、iOS 10で拳銃の絵文字を水鉄砲風に変更。オリンピック関連、LGBT関連を追加 - Engadget 日本版
- 作家さんが「コレ使えますか?」と聞いてきたナゾの記号の正体に驚きの声「そんな名前だったのか」「使い方は?」 - Togetterまとめ
- ほぼ二字コラム: そしてプリンスはシンボルとなった ● type.center
- 41 New Icons in 4.7
- A4サイズできれいにプリントアウトできるFont Awesomeチートシート
- Font Awesome 5 by Dave Gandy — Kickstarter
- 温泉マーク なぜ変える?|NHK NEWS WEB
- 温泉マーク存続へ 別府、由布院関係者ら要望 - 大分のニュースなら 大分合同新聞プレミアムオンライン Gate
ツール
- FontExplorer X Proが6.0にバージョンアップして、メニューが日本語化 - DTP Transit
- フォント管理2013(10.8対応、FontExplorer X Pro編) - DTP Transit
- Drop&Type
- Fontself: Make fonts in Illustrator ~ Plug-ins on Creative Market
- フォント、作るほうの話
- ようやく、ようやく、ようやく!実装されたIllustratorの文字選択関連の機能強化 - DTP Transit
- フォント名が分からない日本語・英語のフォントを検索できる無料サービスのまとめ | コリス
- Photoshop の OpenType SVG フォントと絵文字
- Photoshop CC 2017 Adding Emoji Opentype SVG fonts new feature - YouTube
書籍
- 『+DESIGNING VOLUME 42』もマストバイな号 - DTP Transit
- 月刊MdN 2016年11月号「絶対フォント感を身につける。2」
- 文字を作る仕事 | 鳥海 修 |本 | 通販 | Amazon
OS/ベンダー
- LETSの新書体2016 | ニュース | FONTWORKS
- 『エヴァンゲリオン公式フォント マティスEB TrueType 版』の発売決定 | ニュース | FONTWORKS
- 藤田重信(2016年6月13日放送)| これまでの放送 | NHK プロフェッショナル 仕事の流儀
- 藤田重信さんのツイート: "今日も修整(改訂)なのです。 こうやって少しずつ学んでるんだと思う。 7〜8割の満足度になってきた感じがする。筑紫楷書ゴチ-B https://t.co/FEMb2YeY1B"
- 2016 モリサワ新書体 | 株式会社モリサワ
- モリサワ「タイプデザインコンペティション 2016」モリサワ賞 和文部門金賞 松村潤子氏(日本)、 欧文部門金賞 バルト・ヴォレブレヒト氏(オランダ)が獲得 | ニュース&プレスリリース | 企業情報 | 株式会社モリサワ
- グッズ販売開始
- [ dp フォントDL特集号 ] 10年ぶりの新作も! 魅力的なデザイン書体アイテムがたっぷり! [ No.133 2016.02.17 ]
Web Fonts
- 秀英にじみ明朝L
- Oradano Mincho : public domain Retro style Japanese font
- モリサワ Webフォントサービス「TypeSquare」で文字詰めに対応 | ニュース&プレスリリース | 企業情報 | 株式会社モリサワ
- 文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
いただいた質問から
Web/webとは?
2016年6月に発行されたAP Stylebook(AP通信の書式ルール)にて、「Internet」から「internet」に、「Web」から「web」に変更されました。
Stylebook editors announced their intention to lowercase internet and web in all instances during the American Copy Editors Society convention in April. The change takes effect today.
これまで、「省略語でないのでWEBでなく、Web」という議論はありましたが、これとは違う次元で、internetやwebが一般名詞化するということで話題になりました。
英語圏の話なので関係ないといえば関係ないのですが、この流れを受けて、webと表記される方、また、「ウェブ」とカタカナ表記される方が増えています。
もう、web/Webは、カタカナで「ウェブ」と書くようにしています。#cssnite
— 益子 貴寛🍾 (@takahiromashiko) 2016年12月17日
“墨だまり”ってなんですか?
日本語表現辞典 Weblio辞書では、次のように定義されています。
毛筆や明朝体フォントにおいて起筆・終筆部などに見られる、線が太くて墨が溜ったようになっている部を指す語。
デジタルフォントでは、それぞれの角が直角になっていることが多いのですが、「A1明朝」など、ここ最近のフォントのトレンドでは、写植や活版時代のいわば「ノイズ」をシミュレーションしたテイストが好まれています。
Shiftのロゴも加工しています。
Illustratorで実装するには、少し工夫が必要です。
山田 敬美さん(ピクセルグリッド)から
フォントセッションの最後に、游ゴシックのおまけセッションを担当した山田です。
今回の内容は、CSS Nite LP47 Coder's High 2016にてお話した内容を短くまとめたものです。
短縮するために端折ってしまった箇所もあるので分かりづらい箇所があったかもしれません。
その場合、下記のCoder's Highのときのスライドを併せて見ていただくと理解が深まるかと思います。
いただいた質問
游ゴシック問題、font-weight: 500;で解決してしましたが、この方法ではなく@font-faceを指定される理由はなぜでしょうか?
冒頭にお伝えしたCoder's High向けのスライドの37Pでも少し触れていますが、游ゴシックがすべての環境に入っているわけではないので、他のフォントが使われることもあります。
そのとき、font-weight: 500;の指定がされていると、他のフォントでも太くなってしまう可能性があります。
現時点の主要な環境で影響が見られなかったとしても、マイナーなOSや今後の新しいOSで影響が出てしまうかもしれません。
また、body等でfont-weight: 500;を指定していたとしても、誰かが特定の要素のfont-weightをnormalや400に上書きしてしまった場合、そこだけ細い游ゴシックが適用されてしまうことになります。複数人で運用するとしたら起こり得ることです。
@font-faceは読み込みの負荷になりませんか?フォントは重いイメージがあるので……ローカルになければ影響されない?
游ゴシックは、ユーザーのローカルにあるフォントで、@font-faceではそれを指定しているだけなので、Webフォントのようにダウンロードと表示に時間がかかるということはありません。メイリオなどを指定するのと同じことです。 また、游ゴシックが入っていない環境であれば、font-familyで游ゴシック以降に指定したフォントが代わりに表示されるだけですので、影響もありません。
ユーザーの環境を考えると「sans-serif最強」でしょうか?
私自身、フォントもサイトの世界観をつくる重要な要素であると思っています。
ただ、ニュースサイトやブログなど、文章を読んで欲しいサイトにおいては、ユーザーが慣れていないフォントを強制されてその文章を読むこと自体が負担となってしまったら、運営側もユーザーも双方にメリットがないのかな、というような感じで考えています。
結局、游ゴシックはWin 8.1とmacOSだと同じにならないということですよね?
その通りです。それでよしとした理由は、冒頭にお伝えしたCoder's High向けのスライドの60Pでも触れていますが、游ゴシックMediumがなくてBoldがあるという環境が限定的だったからです。
そもそもWindows 8.1自体のシェアが少ない上に、Office用フォントパックを入れていればWindows 8.1でもMediumが入ります。 ちなみに、游ゴシックにRegularしかない場合はメイリオにするなどの回避策をとるには、JavaScriptでブラウザの種類とバージョンを判定して、それによって指定するフォントを変えるしか方法が考えられませんでした。
どのようにするかはその時々で判断するのがよいのかなと思います。
游ゴシックってline-heightがおかしくないですか?
今回のRegularをMediumにする話とはまた別の話になりますが、游ゴシックに限らず、Noto Sansなどの他のフォントでも、IEだけline-heightにバグ?があるようですね。
メイリオでは問題ないようなので、IEだけはメイリオにするなどの対応が必要なのかもしれません。
デザイントレンド/原 一浩(Greative)、矢野 りん、坂本 邦夫(フォルトゥナ)
Shift10の8番目のセッションであるWebデザイントレンドを担当しましたグレーティブの原 (https://twitter.com/kara_d) です。
年末のお忙しい中ご参加いただきありがとうございました。
今回大量の情報をスライドに起こし、まとめましたがセッション内の短い時間では理解できない部分もあったかと思います。
年末年始、お時間のある時に今回使ったスライドを改めて振り返って、2016年の振り返りと2017年に向けた計画を考える材料としてください。
配布スライドについて、いくつか説明をしていきます。
まず、スライドはPDFで配布しますが、各キャプチャにはサイトへのリンクが仕込まれています。
キャプチャをクリックすることでブラウザにてサイトを閲覧することが可能です。
ほとんどのキャプチャにリンクが貼られていますが、フッター街のように、サイトの特定の箇所のみ取り上げ、言及を行ったものに関してはリンクをしてありません。
また、配布スライドの最後に「おまけ」というコーナーがあり、本編では行わなかったネタが3つほど収録されています。
- アメリカ大統領選挙関連選挙
- 色をブランディングに使う
- テント
こちらも番外編として、お楽しみください。
グローバル企業のセクションで、「グローバル企業とマルチ解像度」というトピックにて登場したComplexion Reduction(コンプレクション・リダクション)についてもう少し書きます。
自分自身何度も目にしていながらすぐに忘れてしまうトレンドワードなので、本番中はうまく説明できなかったので、スマホUIセッションにて佐藤さんが紹介したリンク(リンクについては佐藤さんのスライドを参照ください)からかいつまんで紹介しておきます。
方向性としては、
- フラットなデザインを超えている新しいトレンド
- ミニマルなデザインの次
ということで、特徴は
- 大きな、大胆な見出し
- 単純なより普遍的なアイコン
- 色の抽出
とのことです。
このトレンドがグローバル企業のWebサイトで今後どう使われていくのか、はたまた使われていかないのかについて続けて考えてみます。
スマホのUIのようにユーザが日常で何度も利用し、なるべくストレスにならないようにUIが統一的な方向へ向かっていくタイプのコンテンツと違い、そうそう何度もアクセスするわけではない上に、企業の特徴、ブランディングを大事にするであろうグローバル企業では、今の時点で推察するに相性が悪いように思えます。
ですが、Webデザインのトレンドはどういう方向へいくのかは本当に不思議なもので、1Webサイトの思惑とは別におおきなうねりの中で多数の採用を果たしたトレンドは全体に影響を与えていきます。来年このあたり、コンプレクション・リダクション(明日にはまた忘れてしまいそうです)の動向についても観察していきます。
続いて、配布スライドの有効活用方法について。
まず、個人で見て楽しむ、学習に使うというのがありますが、その先に同僚やお客さんと一緒に見て議論してみるという使い方もあります。
加えて、プレゼン資料の時に引用するという使い方もあります。
トレンドというのは不思議なもので第三者の口から発したもののほうがすんなりと受け入れやすいという性質があります。
ですので、プレゼンの際などに引用して、ビジネスの役に立ててください。
実際Webデザイントレンドで発表した内容がプレゼンで引用された資料をこっそり見せていただいたことがあり、有効活用されているようでした。
最後に、今後のWebデザイントレンドについて書きます。
大阪でも毎年Webデザイントレンドをやっているのですが、大阪版は来年3/25(土)に開催する予定です。こちら、大阪に同業のお知り合いなどいる方はぜひ教えてあげてください。
では、また来年お会いしましょう! よいお年を!
坂本 邦夫さん(フォルトゥナ)から
セッション8のWebデザイントレンドを担当したフォルトゥナの坂本です。
お忙しい中、ご参加いただきありがとうございました。
今年はデザインチェックをしていて、ここ3年でもっとも大きな変化を感じた年でした。何が変わったとか、斬新なデザインと言うことではなく、細部が一気に洗練されてきたように感じています。特にアニメーションのタイミングの洗練は目を見張るほどです。動いた状態を見てほしいサイトがたくさんありますので、ぜひスライドから実際のページにアクセスしてください。出来れば複数の端末、画面サイズでご確認いただきたいと思います。
「坂本の目」でお伝えした画像解像度については、ブログにて補足していますので、。そちらもご覧ください。
高解像度の端末への対応について考えてみた
https://www.color-fortuna.com/blog/other/think-about-resolution.html
また「これからの10年について」では、1987年にアップルが発表したコンセプトビデオ「Knowledge Navigator」を紹介しました。
Apple's 1987 Knowledge Navigator Video
https://youtu.be/HGYFEI6uLy0
25年先の出来事は、決して人智を超えるものではなく、人の予測しうる範囲です。特にこの時期のアップルはスティーブ・ジョブズのいない時期となります。
私たちの10年後を予想できるかというと、けして簡単なものではありませんが、きっと誰かが想像できる範囲の変化にとどまるのではないでしょうか。その「誰か」を探しながら、今までより少しだけ周囲を見渡し、前を見て、柔軟に対応していく、そして大きな変化があってもなんとか乗り越えていく。これこそが人の持つ適応力だと思っています。「すべては人の行い」から生まれます。襟を正して、一緒に次の10年を乗り越えていきましょう。
告知になりますが、大阪版のデザイントレンドが来年3月25日(土)に開催されることが決まっています。大阪版レギュラー・水交デザインオフィスの深沢さんも加わり、時間もたっぷりでパワーアップしたセッションがお楽しみいただけるかと思います。ご都合がつく方がいらっしゃいましたら、ぜひお越しください。
今年もありがとうございました。よいお年をお過ごしください!
矢野 りんさん(バイドゥ)から
セッション8のWebデザイントレンドを担当したバイドゥの矢野です。
ご参加ありがとうございました!
最後10年目のコメントで引用したボブ・ディラン氏のコメント内容は以下で確認できます。
https://www.nobelprize.org/nobel_prizes/literature/laureates/2016/dylan-speech.html
和訳もたくさん出回っていますが、ぜひ原文にある彼のスピリットを感じてください。
アンケートにDLS(Design Language System)は普及するか?という質問がありましたのでフォローアップとして回答します。
普及する分野
- グローバルをターゲットとする組織
- 運用コストを下げて他の分野に投資する必要がある組織
- 膨大なコンテンツを限られたリソースで運用する組織
普及しない分野
- 制作会社のポートフォリオなど季節ごとにスタイルを刷新する組織
- LPなど運用期間が短い制作物
です。DLSはあくまで運用の「コスト」を下げながら、UIのルック&フィール(いわゆるブランド)を統一することが目的ですから、その必要がないケースでは不要です。
DLSのお手本としてGoogle material designは、ぜひいちど一通りチェックしてみてください。
2016年はただ制作技術に精通していればそれでよかった時代が終わってしまい、異なる職域の人間と同じスコープを持って「求められるサービス」を実現しなければならなくなりました。私も未だに数字に対する認識の低さを指摘されたり、マーケティング技法の深さ知らずに悩むことばかりです。
来年は不勉強の強迫観念を捨て、わかんないことはわかんないで他の人に任せる力量も育てつつ、今の自分の課題を明確にして行きたいと思います!
ではまた来年!
クロージング/中川 直樹(アンティー・ファクトリー)
クロージング・セッションを担当した中川です。
当日は長丁場おつかれさまでした。
セッションでも述べましたがwebデザインも「成長期」から「成熟期」に入ってきています。
そして、ユーザーも同様にweb慣れしてきている割合も多くなってきてると思います。
いまいちど、人と人のコミュニケーションという視点にもどり、
Webにおける有効手段など来年は更に検討してみましょう。
下記、セッション中に事例としてあげた参考URLとなります。
高度だけど、ちょっとしたテクニック
余白の余地をもったグローバル・デジタル “デザイン”
- MoMA
Shigetaka Kurita/Emoji 1998-1999 - Katy Perry - Roar (Lyric Video)
- アメリカ シボレー社
全文Emojiのプレスリリース 2015年 - PEPSIMOJ
旅館サイトにおける、効果、フィールド音のもたらす情緒感の比較
2017年、より良いWebデザインを製作、ユーザーへ提供するために….プラスαの「目に見えないデザイン」を積極的に意識しましょう!!
ありがとうございました。
株式会社アンティー・ファクトリー
https://www.un-t.com
中川 直樹
お問い合わせ
ご不明点やお気づきの点がありましたら、フォームからご連絡ください。