すべてのセッションの感想を書き終えるのを待ってると、おそらく下書きのまま公開されず…という危険性があるので、今回は前後編に分けてみました。
はっきり言って、後半は息切れしています。
13:30〜19:30という長丁場なので、体力は絶対に必要です。
CSS Nite LP43 Shift9に行ってきた。(前編)の続きです。
スマートデバイス/たにぐち まこと・松田 直樹・矢野 りん
松田「アプリとウェブデザインとが近づいてきた。それに伴い、プロトタイピングツールもより使えるようになってきた。」 #cssnite
— CSS Nite (@cssnite) December 26, 2015
Web側でもやれることが増えてきて、アプリ寄りのデザインが多くなってきたかもしれません。
そして、やはりプロトタイピングの話が出てきました。
松田「プロトタイピングツールが充実した2015年。invition、pixate、prott、Project comet など。全体を俯瞰して作る。」 #cssnite
— CSS Nite (@cssnite) December 26, 2015
従来はPhotoshopやFireworksでデザイカンプを起こし、クライアントの確認が取れたらコーディング…という流れでしたが、ユーザビリティや複数デバイスの対応を考えると、そのフローはそろそろ限界。
ECサイトについては、スマホ利用率は50%でも、購入は横ばいになっているとのこと。
スマホで探してPCで購入する層も結構いるらしいとは調べたことがあるけど、20代にユーザーを限定すれば、スマホでの購入率はもっと高くなるはず。
楽天、スタートトゥデイ(ZOZO)は売上の4割超がスマホだが、千趣会やニッセンなどはスマホの割合はまだ低い。 #cssnite
— CSS Nite (@cssnite) December 26, 2015
利用者の年齢層がかなり関係してますね。
デザインパターン:全画面バナー(無印良品など)
検索窓を上に持ってくる→TV・カタログとの連動
家電・PC業界も検索窓が上にある。おそらく「指名買い」が多いため。
カートは右上が基本。伊勢丹・マガシーク・ベルペゾンなどの大手は左上。 #cssnite— CSS Nite (@cssnite) December 26, 2015
業種によってUIの位置も違う。
また、これも知らなかったのですが、Amazonのアプリを使用した場合、電話番号で会員登録可能とか。
会員登録の順序
1. 名前やメールアドレスなど、個人情報から登録させる
2. メールアドレスを入力して空メール登録から始める
3. SNSログイン
4. 電話番号でアカウント作成 #cssnite— CSS Nite (@cssnite) December 26, 2015
ツール・フォント/鷹野 雅弘・山本 麻美・轟 啓介
まずはフォント。
San Franciscoフォントは「前後関係に依存する文字」として「:」の位置が変わる。時刻表示「9:41」とかの表示のため。#cssnite
— 池田 泰延 clockmaker_bot (@clockmaker_bot) December 26, 2015
これは素直に凄いと思ってしまった。
時間の「:」の位置がずれると本当に微妙で、毎回位置を調整していた。
なのに自動で位置が変わる!すごい!
あとアイコンフォント。
以前、実務で使った時に便利だったので、できればこれからも使いたいところ。
市民権を得た Web Fonts
アイコンフォント「Font Awesome」
4.3 1月 42個
4.4 7月 77個
4.5 11月 20個 計139個#cssnite— CSS Nite (@cssnite) December 26, 2015
これだけ種類があると困ることは少ないでしょね。
・Typekit でモリサワ書体が利用可能になった
・Google Fonts
- Noto Sans Japanese
- Source Hans Sans
- 源ノ角ゴシック
ちなみにNotoとは"No More Tofu"(すべての字形をカバーする) #cssnite— CSS Nite (@cssnite) December 26, 2015
モリサワが使えるようになったと知って、すぐさま新ゴ入れました。
会社の環境はフォントワークスなので、ロダンは使えるけど新ゴが使えないのが悲しかった。
無料だとウェイトが限られてくるけど、使えるようになったのは素直に嬉しい。
ツールについては、個人的にも注目している「Prott」が素晴らしい。
会社で一括導入したいけど、たぶん無理っぽいので、まずは個人で契約しようかなと思ってます。
そして、「中の人」山本氏にさりげなくdisられるAdobe…たしかに、ユーザーとしては最近は良くない傾向がつづている気がします。
cloudなのに、Adobeのサーバーが落ちて認証できず仕事にならないとか(それも24時間止まった!)、各アプリの機能が増えすぎてUIパネルはたくさんあるし、マシンスペックもそれなりに要求されるし、Adobe税を払っている甲斐もなくなってる感じがしないでもない。
業界内が「Sketch」や他のツールに流れているのは、やはりAdobeのツールが使いづらくなりつつあるからかな…。
と、思っているところに、Adobeが本気出した!Adobeの逆襲!
Project Comet
轟氏は「Project Comet」のことを「コメットちゃん」と連呼。愛を感じる…。
実際にデモ版を見たのですが、これがいい。ものすごくいい。
Comet のパーツコピーの操作に、隣( @emim )から「ヤヴェェ…」って声が漏れたのが聞こえたw
— ふっちー (@Fuchie) December 26, 2015
心のなかで言ったつもりだった(*_*) #cssnite https://t.co/QEYJttz5qI
— emi moriya (@emim) December 26, 2015
この気持ちすごくわかる。すごくヤバイ。いい意味でヤバイ、ヤバイですAdobeさん!
うまくいけば「prott」の対抗ツールになりそうなんですが、最近のAdobeの機能過多とむちゃくちゃ多いUIパネルを考えると、一抹の不安がないわけじゃないです…。
Adobeさんにお願いしたいのは、軽量でUIも簡単なツールにしてくださいということでしょうか。
これがAdobeファミリーに入ると導入障壁がなくなるので、すごく期待してます。
頑張って!Adobeさん!
ちなみに、デモは素晴らしかったのですが、
電源22%って微妙 #cssnite
— Kazuma Nishihata (@KazumaNishihata) December 26, 2015
…Twitterでは、ノートの駆動時間を気にされていたのでしたw
Webデザイントレンド/原 一浩・矢野 りん・坂本 邦夫
これも年末恒例。
微妙に去年のセッションのその後…が見られました。
上場企業のサイトが一般ユーザーではなく、株主に向けたIR情報を前面に押し出しているリニューアルが多かったというのが興味深いところ。
Webサイトの世界にも、株主最優先の波が押し寄せている感じ。
上場企業で見られる薄幸系サイト
・文字が小さいか薄い
・余白が広め
・PCとスマートフォンが同じ表示投資家情報だけが書かれていて利益を生むチャンネルは別
– IRだからそれでいいじゃん
– 読みたいならPDF読んで
– むしろこのサイトは見ないで #cssnite— CSS Nite (@cssnite) December 26, 2015
毎年面白いのが「自治体編」。
日本の自治体編
自治体サイトがあつい!
– こどもから大人、様々な業種の人たちがターゲットなWebサイト
– 日本人に向けて普遍的に伝えるかたちとは #cssnite— CSS Nite (@cssnite) December 26, 2015
2015年の自治体サイトのリニューアル数
232 / 1700
だいたい毎年2割程度 #cssnite— CSS Nite (@cssnite) December 26, 2015
自治体のサイトリニューアルでも斬新なものが紹介されましたが、ちょっと前の「ダサイ」イメージとはかなり違う。
柏崎市公式ホームページ
嬉野市|オープニングページ
写真の町 北海道上川郡東川町
平取町オフィシャルサイト
原「シティプロモーションがうまくいっている自治体はチャレンジしている。あと若者を上手く使っている。」
矢野「地方創生でお金が回っているのかもしれない。」 #cssnite— CSS Nite (@cssnite) December 26, 2015
なるほど。地方創生はあり得る話ですね。
そして、ゆるキャラの末路も語られてたりします。
愛別町
このサイトの最下部には「あいちゃんマン」というゆるキャラがいて、クリックするとページの上に戻るというギミックが付いていました。
今年、消えましたww
消えたと同時にページの上に戻ることができなくなってますwww
去年くらいまで、ゆるキャラを前面に押し出したサイトも多かったのですが、今回はゆるキャラが抑え気味になるか、跡形もなく消えてしまったサイトが出てきました。
そして、「どうしたの?」と思えるキャラクターが誕生しており、「ゆるキャラの向こう側」がかいま見える状態に。
ゆるキャラの先https://t.co/WgH4cD8MaLhttps://t.co/SpIt8QRocUhttps://t.co/iqKnPHJuMhhttps://t.co/wl0g3dyhEn #cssnite
— CSS Nite (@cssnite) December 26, 2015
志木市。どうしたんでしょうね。
2016年のトレンド大予想
原「ふにゃっとデザイン。今まで流行ってきたものは丸の中に入れるとか、六角形の中に入れるとか。来年は波とか、手書き系など、フラットからふにゃっとになるのではないか。」#cssnite— CSS Nite (@cssnite) December 26, 2015
2016年のトレンド大予想
矢野「おなじみのキャラ大切に。キャラは矢面に立たされる。今後の景気後退予測もふまえて、今いるキャラを大事にして欲しい。」
原「あいちゃんマンを消さないで」 #cssnite— CSS Nite (@cssnite) December 26, 2015
ですよね。
なぜか「あいちゃんマン」はShiftで人気者。
2016年のトレンド大予想
坂本「ファンページ。やはりサイトに訪れてくる人のほうを向いて作っていく必要がある。」 #cssnite— CSS Nite (@cssnite) December 26, 2015
2016年はどんなトレンドが生まれるのか。果たして予測は大当たりするのか。
来年も楽しみなところです。
6時間経過したくらいから集中力がなくなってきた(涙)Shiftも9年目なら、自分も9つ年をとってるんだなぁー・・・というわけで、お疲れさまでした。 #cssnite
— 林大輔 (@HayashiDaisuke) December 26, 2015
わかる。私も後半はだいぶきつかった。
セッションはそれぞれに面白いのですが、かなりの長時間なので、体調を万全にしていかないと辛い思いします(経験上)。
10周年を迎えて、業界的には名前が知れ渡っているCSS Nite。
来年もよろしくお願いします。
Twitterがまとめられています。
Shift9:Webデザイン行く年来る年(CSS Nite LP43)