CSS Nite公式サイト

CSS Nite LP44「Webデザイントレンド(自治体編)+自治体サイトアクセシビリティ診断」フォローアップ

9 years 10ヶ月 ago

2016年2月24日にワテラス コモンホール(お茶の水)で開催したCSS Nite LP44「Webデザイントレンド(自治体編)+自治体サイトアクセシビリティ診断」のフォローアップを公開します。

Webデザイントレンド(自治体編)
/原 一浩(Greative)、清家 順(ユニバーサルワークス)

特設サイト(自治体)/原 一浩(Greative)、清家 順(ユニバーサルワークス)

自治体サイトアクセシビリティ診断/清家 順(ユニバーサルワークス)、植木 真(インフォアクシア)

原さんから

Webデザイントレンド(自治体編)および特設サイトスペシャルを担当しましたグレーティブの原です。

今回は平日昼間の開催のなか、参加いただきありがとうございました。自治体サイトの特設サイトを見るために、もう一度自治体サイトを見直して、しかもコンテンツを探すためにサイトを使ってみました。

今まで、あまり気にかけていなかったサイトの特設サイトが洗練されていたというケースを何度も目にしました。そこに広がっていたのは、街をもっと盛り上げたいと考えるコンテンツの作り手やまちの人でした。

自治体サイトは結構硬い印象を持たれることがありますが、僕は少し視点を変えて面白おかしく紹介することで、少しでも興味を持っていただけたら、何か新しい問いを発見できればと思いつつ、活動しています。

そして、その結果多くの人が自治体サイトに関わるようになると、実はこれ、税金をよりよく使っているということにもなるのではと考えています。あまり崇高な考え方ではありませんが、自治体サイトをもっと面白く、もっと多くの人が使いやすくする手がかりのようなものを今後も観察していけたらと考えています。

みなさんもなにか面白い動きを見つけたら是非教えてください!

清家さんから

この度は、CSS Nite LP44「Webデザイントレンド(自治体編)+自治体サイトアクセシビリティ診断」にご参加いただきありがとうございました。今回は、Webデザイントレンドと特設サイトのセッションでは清家として、自治体サイトアクセシビリティ診断ではドクターSとして登壇をさせていただきました。

自治体サイトに対しては、縁遠いもの・進化の少ない退屈なもの、Webアクセシビリティ面では、難しいもの・特別なもの、との印象を持たれる方もいるでしょう。今回のセッションでは、それを払拭すべく、原さんの膨大なアーカイブから厳選されたサイト群、ユニバーサルワークスが行なってきた自治体サイト調査から得た「症例」をもとに、できるだけ具体的に紹介することを意識しました。

地域の特色やそこに住まう人の特性から、魅力を掘り下げ、先鋭化し、コアメッセージを定め…と、文字にすると簡単ですが、セッションの中でご紹介したようなWebサイトとして表現されるまでには、たくさんの工夫があったのだろうと思います。今回をきっかけに、自治体サイトに訪れていただき、その工夫を体感いただけるとうれしいです。

自治体サイトアクセシビリティ診断では、私が勝手に命名した病名を並べましたが、誰もがどんな環境でも情報にアクセスできることは、Webサイトが健康であることの証であると考えます。ナースMから紹介のあった「基本のキ」を意識しながら、みんなで体質改善を進めていきましょう。

植木さんから

「自治体サイトアクセシビリティ診断」のセッションで、ドクターSのアシスタント役「ナース M」として出演した、インフォアクシアの植木です。

ドクターSとの打ち合わせでの話の流れから、あのようなコスチュームで登場することになりました。初めてお会いした方も少なくなかったと思いますが、リアクションに困らせてしまい、申し訳ありませんでした...。

さて、自治体のWebサイトというと、やはりアクセシビリティの確保が社会的な要請として求められています。3月にはJIS X 8341-3:2016が公示され、4月1日から障害者差別解消法が施行され、ますますその要請は強まることでしょう。それにあわせて、総務省からは「みんなの公共サイト運用ガイドライン」も全国の自治体に提供されます。

一方で、ユーザーがWebコンテンツを利用するデバイスや利用シーンは、どんどん多様化してきています。そんななか、アクセシビリティは単に「高齢者対応」や「障害者対応」という括りのものではなくなってきています。より多くの利用環境で、ユーザーがストレスなくWebコンテンツを利用できるようにする必要があるからです。

最後に挙げた10のポイントには、どれも特定のユーザーだけのために実践すべきものではありません。例えば、JIS規格への対応に取り組んでいる自治体のWebサイトは、文字色と背景色のコントラストをしっかり確保しています。デバイスや場所に関係なく、すべてのユーザーにとって見やすくて、ストレスなく閲覧できるWebサイトになっています。特別なコトや特殊なコトではなく、当たり前のことをきちんと実践するだけで、アクセシビリティを確保して向上させることができるのです。

私たちのWebコンテンツをより多くのユーザーが楽しめるように、まずはできることから実践してみましょう。

CSS Nite実行委員会

坂本 貴史さん(ネットイヤーグループ)を講師に6-7月に都内で3本のセミナーを開催

10 years ago

『IAシンキング―Web制作者・担当者のためのIA思考術』を2016年3月にリリースされた坂本 貴史さん(ネットイヤーグループ)を講師に、次のセミナーイベントを開催します。

6月1日分は告知開始日に満席。6月16日も残席20を切っています。お早めどうぞ。

CSS Nite実行委員会

CSS Nite LP45「ライティング・スキル強化デー」が終了しました

10 years ago
CSS Nite実行委員会

CSS Nite in FUKUOKA, Vol.8が終了しました

10 years 2ヶ月 ago

2016年2月19日(金)デジタルハリウッド福岡校でCSS Nite in FUKUOKA, Vol.8を開催し、40名の方にご参加いただきました。

CSS Niteの福岡版は、このVol.8を含む、過去5回、デジタルハリウッド福岡校に会場提供を含めてサポートいただいています。

今回(Vol.8)、昨年末に都内で開催したShift9から2セッションの再演版を2セッション、

  • 「Webデザイントレンド」/原 一浩(Greative)
  • 「ツールと制作環境、フォント 2015-2016」/鷹野 雅弘(スイッチ)

加えて、2本のLT(ライトニングトーク)で構成しました。

  • フリーランスになって気付いた「やっててよかったこと」と「今やってること」について /末永 まり絵(デザイン イリューム)
  • 体の動きが音楽になる!次世代楽器「KAGURA」/横山 隆明(しくみデザイン)

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

CSS Nite実行委員会

Shift9:Webデザイン行く年来る年(CSS Nite LP43)のフォローアップを公開します

10 years 2ヶ月 ago
CSS Nite実行委員会

Shift9:Webデザイン行く年来る年(CSS Nite LP43)フォローアップ(1)長谷川 恭久さん(could)

10 years 2ヶ月 ago

2015年12月26日(土)、ソラシティホールで開催したShift9:Webデザイン行く年来る年(CSS Nite LP43)のフォローアップとして、長谷川 恭久さん(could)の『貴重講演:制作者はもっと盗むべき、たったひとつの理由』セッションのスライドなどを公開します。

フォローアップ+メッセージ

基調講演「制作者はもっと盗むべき たったひとつの理由」を担当した長谷川です。年末のお忙しい中、ご来場いただきありがとうございました。 例年以上に刺激がたくさんあるイベントだったのではないでしょうか。

私は今でも Web ブラウザにある「ソースを見る・要素検証」を選択して、Web サイトの中身を見て学んでいます。この「コピーのしやすさ、盗みやすさ」が Web を急成長させた要因です。皆で学ぶから Shift のようなイベントで毎年集まる度に多くのことを学べるわけです。仕事をする人間としてのモラルをもつことは重要ですが、「これは他人のアイデアだから禁止」と過保護になるより、新しいものを作り続けるほうが自分にとっても周りにとっても良いはずだと思います。

クリエイティビティという言葉には、どこか神秘的なところがありますし、デザインにしても似たようなニュアンスが含まれていることがあります。しかし、その神秘性が「よく分からない」ということになり、「デザイナー=いつの間にか良いかんじのものを作ってくれる人」という立場にさせているのではないでしょうか。私たちはそのベールによって隠れたデザインを見せていく必要があります。

最後のセッションで矢野りんさんが「コミュ障になるな」と仰っていましたが、これは正に本セッションと繋がるものだと考えています。デザインを見てもらえば分かってもらえるということはありません。プロセスを見せる。自分のデザインについて語る。私たちの仕事にある「分かりにくい」ところを少しでも「分かりやすくする」ところがスタートではないかと思います。

これからも Web 上で、そして CSS Nite でデザインのこと、開発のこと、制作のこと話し合っていきましょう。

動画

Shift9[#1]基調講演/長谷川 恭久(could) from CSS Nite on Vimeo.

CSS Nite実行委員会

Shift9:Webデザイン行く年来る年(CSS Nite LP43)フォローアップ(2)益子 貴寛さん(サイバーガーデン)、小山田 晃浩さん (ピクセルグリッド)、久保 知己さん(まぼろし)

10 years 2ヶ月 ago

2015年12月26日(土)、ソラシティホールで開催したShift9:Webデザイン行く年来る年(CSS Nite LP43)のフォローアップとして、益子 貴寛さん(サイバーガーデン)、小山田 晃浩さん (ピクセルグリッド)、久保 知己さん(まぼろし)の『マークアップ』セッションのスライドなどを公開します。

メッセージ:小山田さん

マークアップセッションを担当した小山田です。

マークアップ・フロントエンドの視点から見た今年のトレンドと来年の予想、いかがでしたでしょうか?

HTMLやCSSなどテクニック単体での大きな変化はあまりなかった用に感じますが、それを取り巻く環境は大きく変わった用に感じます。

特にIEについて、IE8のサポートは終了し、これからは9あるいは11が下限になるというお話をしました。事実、すでにいくつかの有名サイトでは排除する方向に向かっていますし、来年はそれが普通になってくると考えています。

制作者が考えなければならないブラウザーの下限が変わればできることはより多くなります!そして理不尽な不具合にも付き合わなくてよくなるのです。

も ちろんこれは、私達の仕事が楽になるからという理由ではなく、IE8がキケンなブラウザーという建前があるからです。「だれがキケンの責任を取るのか」も 含めみなさんの上司やお客さんにも相談し、社内のガイドライン等を見なおしてみてはいかがでしょうか。そしてよりモダンな技術でよりより体験をWebの利 用者にお届けしてはどうでしょうか。

最後に、すこしおそくなりましたがWebGL(JavaScript)でメリークリスマス!
http://yomotsu.net/blog/assets/2015-12-25-xmas/demo/index2.html

お知らせ: 弊社ではCodeGridというメディアを運営しています。HTML、CSS、JavaScript、今回話題にした縦書きやWebアプリケーションの作り方などを毎週木曜日にお届けしています。「技術の情報を自動で仕入れたい」という方、ぜひお試しください!

メッセージ:益子さん

マークアップセッションを担当した益子です。Shift9へのご参加、ありがとうございました。

デザイントレンドを担当した原さんと、「Shiftって、ちょっと同窓会っぽいノリで、楽しいね」と話していました。

いろんなセミナーや勉強会がありますが、9年つづけているShift、10年つづけているCSS Niteの価値が、そんなところにもあると思っています。

来年は、セッションのラインナップや出演者を見直し、ますます充実した内容をみなさんにお届けできたらと思います。

同じ時代に生まれ、生きている者同士、知識と熱を心地よく分け合える場になれたらと、いつも願っています。

メッセージ:久保さん

マークアップセッションを担当した久保です。
ご来場ありがとうございました。

今年を振り返ると、CSSそのものには大きな変化はあまりありませんでした。
CSS設計の浸透や、SassやPostCSSなどのツールが去年とは異なる流れにのった年だと感じています。

Sassは本家のRuby Sassから、C/C++で開発されているlibSassに流れている傾向があります。
この背景には、gulpなどのNode.jsで動作するツールを利用する場合でも、libSassを使えば、わざわざRubyをインストールせずにSassをコンパイルできるようになります。

な おlibSassではSassのフレームワークのCompassが動作しません。Compassに依存してサイトを構築している方は、気をつけてくださ い。ただしCompassのベンダープリフィックスの付与やCSSスプライトの自動生成などは、PostCSSのプラグインのautoprefixerや gulpのプラグインのgulp.spritesmithで代用できます。

ライブコーディングでは、gulp, jade, Sass(libSass), Browsersync, Emmetのデモを行いました。

Browsersync は、ファイルを保存するだけでブラウザが自動的に更新されるツールです。また開発しているパソコンと同じWi-Fiにつないだスマートフォンからターミナ ル(コマンドプロンプト)に表示されるURLにアクセスすると、パソコンで見ているWebページと同期し、ファイルの自動更新、スクロールなどの同期など が行われます。
パソコンやスマートフォンのWebサイトの開発には、必要なツールとなっています。

Emmetは、CSSプロパティの展開を行っていたエディタのプラグインです。[p20-0]と入力して、Emmetのアクションを実行すると[padding: 20px 0;]と展開されます。
CSSの記述を素早く行えるようになるプラグインです。
Emmetが動作するエディタは、Sublime TextやDreamweaver, Brackets, Atom, WebStorm, Vimなど、これ以外にも多くのエディタで動作するプラグインです。
すぐに導入できるものなので、インストールしておくといいでしょう。

なおEmmetは展開するだけのツールと勘違いされている方が多いですが、HTMLやCSSを楽に書くためのアクション集です。

詳しくは、私がAdobe Creative Stationで連載していた全6回のEmmetの記事をご覧ください。
https://blogs.adobe.com/creativestation/web-learning-emmet-why-emmet

今回のライブコーディングで使用したgulpfileは、GitHubに公開します。
気になる方は、ぜひご確認ください。
https://github.com/kojika17/2015-shift9-livecoding

お知らせ:

2016年1月9日に「と、コラボ特別編 Webクリエイター新年会 featuring まぼろし」というイベントを行います。弊社まぼろしのスタッフが多く出演するイベントです。
席に限りがありますが、お時間がございましたら、ぜひお越しください。
http://www.creativevillage.ne.jp/lp/tocolabo_special/

動画

Shift9[#2]マークアップ from CSS Nite on Vimeo.

CSS Nite実行委員会

Shift9:Webデザイン行く年来る年(CSS Nite LP43)フォローアップ(3)植木 真さん(インフォアクシア)、中根 雅文さん(AccSell)、山本 和泉さん、伊原 力也さん(ビジネス・アーキテクツ)、太田 良典さん(ビジネス・アーキテクツ)

10 years 2ヶ月 ago

2015年12月26日(土)、ソラシティホールで開催したShift9:Webデザイン行く年来る年(CSS Nite LP43)のフォローアップとして、植木 真さん(インフォアクシア)、中根 雅文さん(AccSell)、山本 和泉さん、伊原 力也さん(ビジネス・アーキテクツ)、太田 良典さん(ビジネス・アーキテクツ)の『アクセシビリティ』セッションのスライドなどを公開します。

メッセージ:【植木さん】

インフォアクシアの植木です。

「WAI-ARIA」は、ゼロから実装しようとすると難易度が高いかもしれませんので、例えばセッションでもご紹介したように、最初のスタートとしては、WAI-ARIA対応を進めている「Foundation」や「Bootstrap」といったフレームワークや「jQuery UI」のウィジェットを使ってみるのがよいかもしれません。

例えば、「Bootstrap 3」用のプラグインがあるのですが、そのデモページではよく使われるリッチなUIにそのプラグインを用いてWAI-ARIAを実装してアクセシブルにしたサンプルを見ることができます。

このページには、モーダルウィンドウ、ドロップダウンメニュー、タブ&タブパネルなどのサンプルがあります。デフォルトではプラグインが適用されていないのですが、ページ先頭にあるリンク「load bootstrap accessibility plugin features」をクリックすると、プラグインが適用された状態になります。

適用されているとき、先ほどのリンクは「unload bootstrap accessibility plugin features」という文言に変わっているのを確認してください。「unload ......」のリンクをクリックすれば、再びプラグインが適用されていないデフォルトの状態に戻ります。

デフォルトのときとプラグイン適用後のHTMLコードを見比べてみていただけると、違いが分かるかと思います。スクリーンリーダーの読み上げも、やはり明らかに変わりますよ。
こういった人気のあるフレームワークやライブラリなどでのWAI-ARIA対応が強化されていくといいなと思います。

その他、「WAI-ARIA」を実装したサンプルは、以下のURLなどで実際にご覧いただくことができます。

デモで使用したモーダルウィンドウは、こちらをベースにしました。

また、WebアクセシビリティのJIS規格(JIS X 8341-3)の元にもなっているW3C勧告「Web Content Accessibility Guidelines (WCAG) 2.0」の関連文書として、達成基準を満たす方法を解説したものがあり、以下のURLで日本語訳が公開されています。

それでは、また来年お会いしましょう!

メッセージ:【中根さん】

AccSellの中根です。

今回は、WAI-ARIAに注目してみました。

普段からアクセシビリティー関連の技術動向を追いかけている人でないと、まだあまり認知されていない技術だと思いますが、セッションの中でも触れたBootstrapやFoundationのようなフレームワーク、また最近のCMSが生成するコードを見ていただくと、role属性を初めとするWAI-ARIA関連の記述が意外に多いことに気づかれるのではないかと思います。
コンテンツの見た目にはなにも影響を与えないこれらの記述ですが、デモでご覧いただいたとおり、スクリーン・リーダーには大きな違いをもたらします。

W3Cが発行している仕様書を読んで理解しようと思うとかなり大変なこのWAI-ARIAですが、セッションの中でも取りあえげた書籍、「コーディングWebアクセシビリティ」や「わかりやすいWAI-ARIA 1.0仕様解説書」などを読んでいただければ、この技術の全貌を理解し、そしてアクセシビリティーとはなにかということを考えるきっかけになるのではないかと思います。

2015年は、WAI-ARIAの実装が、コンテンツ側でもユーザー・エージェント側でも進んで、ユーザー視点でもいよいよ使い物になるレベルになったなと強く感じさせられた年でした。おそらくこの流れはさらに続いて、いろいろなWebコンテンツをより多くの人にとって使いやすいものにしていく上で、WAI-ARIAが欠かせない技術になっていくのではないかと思います。
今回のセッションをきっかけに、そんなWAI-ARIAについて知り、そしてアクセシビリティーについても思いを巡らせてみていただければ嬉しいです。

AccSellでは、WAI-ARIAのようなWebアクセシビリティーに関連する最新技術に加えて、アクセシビリティーに関する社会的な動向、Web以外の分野も含めた情報アクセシビリティーに関連する話題、そしてアクセシビリティーに関連するイベント情報などを、ポッドキャスト、メール・マガジン、Twitter、そしてAccSellのサイト上で紹介しています。ぜひ一度覗いてみてください。
http://accsell.net/

メッセージ:【山本和泉さん】

こんにちは。AccSellのアクセシビリティ・ビギナーのガイドを担当している山本和泉です。
今回のアクセシビリティのセッションはいかがでしたか?

2015年はアクセシビリティの話題がネットやリアルや書籍等々でとても多かったなぁって本当に思いました。
以前、ミツエーリンクスの木達さんは「Webアクセシビリティ・ファースト」(http://web.a11y1st.jp/)というページで、『アクセシビリティは、マルチデバイス時代において、全てのWebサイトに必ず求められる品質の一つでしょう。』と書かれている通り、制作の追加の作業というポジションではなく「Webサイトの品質」として意識していく時代なんだろうなーって思います。

また、Webサイトが品質としてアクセシビリティを担保していくことで世界が変わるような気がします。

今回のセッションを機にぜひWebアクセシビリティについて一緒に意識していけたらうれしいです!!

追伸:ちなみに当日の伊原さんと太田さんは書籍に合わせた「アクセシビリティピンク」と「アクセシビリティグリーン」の衣装だったのをお気づきですか?
安心してください、動画で確認できますよ。

メッセージ:【太田さん】

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

WAI-ARIAは難しそうだ、と感じられた方もいらっしゃるかもしれません。ご紹介した書籍『コーディングWebアクセシビリティ』は、イギリス人の著者が高度なジョークを交えてWAI-ARIAの基礎的な考え方を紹介する、非常にフランクな読み物になっています。難しそうだと思われた方にこそお勧めですので、ぜひ一度お手にとって見ていただければと思います。

WAI-ARIAの難しさは、ぱっと見ではその効果が分からないところにもあります。今回のセッションでは中根さんにデモをしていただきましたが、このデモで初めてWAI-ARIAの効果を実感できたという方も多いのではないでしょうか。中根さんお勧めのNVDAやVoiceOverなどは気楽に導入できますので、興味をもたれた方は、ぜひ一度スクリーンリーダーでの読み上げを体験していただければと思います。

また、セッションでも簡単にご紹介しましたが、CSSフレームワークにWAI-ARIAが組み込まれていることも多くなってきています。きちんと設計されたフレームワークを使えば、あまり意識しなくても、自然とアクセシブルなコンテンツを作ることができるようになります。今後も普及は進んでいくと思いますので、恐れずに、かつ気楽に、WAI-ARIAに触れていっていただければと思います。

メッセージ:【伊原さん】

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

書籍『デザイニングWebアクセシビリティ』では、今回取り上げたネタも含め、いろんな状況における「使いづらさあるある」と実際の解決例を200件以上にわたって紹介しています。ぜひご覧ください。

こういったあるある問題を回避・改善するには、複数人でのプロトタイプのレビューや、近くに居る人へのゲリラ的なユーザビリティテストといった手法が有効です。

言い換えると「作り手の考えだけに閉じないようにする」ということであり、これって実は、今回のイベントで出た「プロセスを共有する」「コミュ障になるな」といった話、そのものだったりするのです。

アクセシビリティとは、多様な状況におけるユーザビリティの集合体です。だとすれば、作り手がなるべくスタンスを広く取って、周りに目を向け、共創していくことがアクセシビリティの改善に繋がるのは、至極当然のことだと言えます。

2016年の展望でも述べたとおり、これからWebやデバイスの利用はさらに多様化の一途を辿ります。アクセシビリティという引き出しを持っているかどうか、何か少しでも実践経験があるかどうかが、今後のWeb活用においての重要なヒントになることは間違いありません。

ぜひ視点をShiftさせて、一緒にアクセシビリティの世界を覗いてみませんか。安心してください、面白いですよ。

動画

Shift9[#3]アクセシビリティ from CSS Nite on Vimeo.

CSS Nite実行委員会

Shift9:Webデザイン行く年来る年(CSS Nite LP43)フォローアップ(4)たにぐち まことさん(エイチツーオー・スペース)、松田 直樹さん(まぼろし)、矢野 りんさん(Baidu)

10 years 2ヶ月 ago

2015年12月26日(土)、ソラシティホールで開催したShift9:Webデザイン行く年来る年(CSS Nite LP43)のフォローアップとして、たにぐち まことさん(エイチツーオー・スペース)、松田 直樹さん(まぼろし)、矢野 りんさん(Baidu)の『スマートデバイス』セッションのスライドなどを公開します。

メッセージ:矢野さん

ご参加くださりありがとうございました。今年はAndroid 6でiOS同様アプリの取得する権限をユーザーが個別に選択できるようになったり、強烈に解像度の高いiPad Proが追加されるなどいろいろな動きがありました。Appleはこれからも異なる解像度の端末をどんどんリリースしてくるでしょう。ネーティブアプリもWebとおなじようにフレキシブルな画面設計が必須ですね。

今年のセッションで矢野からはモバイルむけ画面デザイン最適化のために数値目標を持つことというお話をしました。モバイルのUIデザインを評価するばあい、単に「使いやすい」とか「便利」というのはあまり意味がありません。デザイナーが個人的に使いやすいと考えていてもリテンションレートが50%以下ならそれは使いやすいとは言えないのです。数値にかなった評価をするという考え方をぜひ活用してみてください。デザイン力で目標を達成することが、できるようになるでしょう!

来年はたくさん新しいことに挑戦して、年齢に関係なくうんと成長できる年になるようみなさんと一緒に頑張りたいです。またお会いしましょう!

メッセージ:松田さん

スマートフォンセッションの松田です。ご参加いただいた皆様、今年もありがとうございました。

今回はECサイト、特に入力フォームを中心とした傾向をご紹介いたしました。UI単体をどう見せるかに加えて、そのUIをどういったタイミングで見てもらうかという動線設計のウェイトが上がってきているのが近年の傾向です。ひとつの画面およびUIとしてのフォームを使いやすくデザインすることももちろん大事ですが、そのUIがサイト全体の中でどういった立ち位置で存在させるべきなのか、ということをお伝えできたかと思います。

こういった時系列の設計に役立つのが冒頭でも紹介した「プロトタイピング」です。(長谷川さんのセッションや鷹野さんのセッションでも紹介されていましたね。)今回、ECサイト100社以上の調査を行って、私自身、プロトタイピングでの全体設計の重要さを改めて感じました。Webサイトの場合、どういった画面やUIも単体では存在し得ないし単体では使ってもらえません。必ずその前後のコンテキストがあるのですよね。この時系列の設計は、矢野さんのKPIのお話にも繋がります。運用での検証と改善こそ時系列設計の最たるものでしょう。

100社の調査をしてみて思ったのが、この動線設計には完全なセオリーはなく、それぞれの正義があるのだろうということ。特にスマホという文字通り肌身離さない、人に一番近いデバイスだからこそ、Webサイトを「ユーザーと対話する生き物」として考えていきたいものですね。

毎年こういった考える機会をいただけて幸いです。来年もお会いできること楽しみにしています!あらためまして、ありがとうございました!

メッセージ:たにぐちさん

今年も一年お疲れ様でした。今年の、スマートデバイスセッションは ECサイトの特に、フォームを取り上げました。もしかしたら「自分は ECサイトには関わっていないので関係ない」と思われる方もいるかも知れません。しかし私は、逆に ECサイト以外のサイトでおざなりになりがちなフォームに、今回の内容で学ぶべきと頃があればと思い、このテーマに決めました。

ECサイトの場合は、売上などのデータをシビアに確認しながらフォームをチューニングしているはずです。しかし、ちょっとしたお問い合わせフォームや申し込みフォームだと、そこまで気を使って作ることができないかも知れません。しかし、スマートデバイスでお問い合わせ・申し込みをする機会はますます増えていきます。そんな時、少しでも使いやすいフォームが増えていくことで、より多くの方がスムーズに手続きができる世界を私たちで作っていけたらと思いました。

なにか参考になる部分があれば幸いです。

動画

Shift9[#4]スマートデバイス from CSS Nite on Vimeo.

CSS Nite実行委員会

Shift9:Webデザイン行く年来る年(CSS Nite LP43)フォローアップ(5)鷹野 雅弘(スイッチ)、山本 麻美さん(グッドパッチ)、轟 啓介さん(アドビ システムズ)

10 years 2ヶ月 ago

2015年12月26日(土)、ソラシティホールで開催したShift9:Webデザイン行く年来る年(CSS Nite LP43)のフォローアップとして、鷹野 雅弘(スイッチ)、山本 麻美さん(グッドパッチ)、轟 啓介さん(アドビ システムズ)の『ツールと制作環境、フォント』セッションのスライドなどを公開します。

鷹野

私自身、Shiftは一番スキなイベントなのですが、いかんせん、長い。「今年は短めに」と思いつつも、どうしても縮めることができません。
ここ数年は、ほぼ同じフォーマット、同じ登壇者で進めてきましたが、10回記念の来年は、Shiftシリーズが「シフトする」回と考えています。

さて、私のセッションでは、フォントとツール分野を振り返りました。知っているだけで「早く終わる」「キレイに仕上がる」違いが生じるのであれば、それを知らないままいるのは損でしかありません。

テクニカルなレビューと、ワークフローの落とし込みについて、ある意味「代表として」調べてあげ、書籍や執筆、セミナーなどを通してお伝えしていますので、ぜひ、何かしらのカタチでフォローいただければ幸いです。

セッションのリンク先などは、下記にまとめました(ダウンロード期限があるものがありますのでご注意ください)。

フォローアップ

動画

Shift9[#5]ツールと制作環境、フォント from CSS Nite on Vimeo.

CSS Nite実行委員会

Shift9:Webデザイン行く年来る年(CSS Nite LP43)フォローアップ(6)原 一浩さん(Greative)、矢野 りんさん(Baidu)、坂本 邦夫さん(フォルトゥナ)

10 years 2ヶ月 ago

2015年12月26日(土)、ソラシティホールで開催したShift9:Webデザイン行く年来る年(CSS Nite LP43)のフォローアップとして、原 一浩さん(Greative)、矢野 りんさん(Baidu)、坂本 邦夫さん(フォルトゥナ)の『Webデザイントレンド』セッションのスライドなどを公開します。

メッセージ:原さん

今回はWebデザイントレンドにご参加いただきありがとうございました。
昼から続いたセッションの一番最後ということで聞くのもなかなか大変だったと思いますが、長時間聴いていただきありがとうございます。

新しい試みとして、今年の出来事を振り返るというのをやりました。このコーナーにて、少しでも今のグローバル企業、上場企業をとりまく社会情勢の雰囲気みたいなものを振り返れる機会になったら幸いです。

今回は75分という長丁場のセッションでしたが、それでも語りきれなかった現象はいろいろとあり、それらはスライドの最後の方に70ページほどおまけコーナーとしておいてありますので、こちらもお楽しみください。

Webデザイントレンドを聞いたあと、これを活かすためにぜひ「トレンドサイトにじっくり触れる」というのをやってみていただけたらと思います。

今回挙げたトレンドサイトは、トピックに該当するものというだけでなく、その中でも別の側面から見た場合でも参考になりそうなものや、実はある部分でそれほどいけてなかったりというサイトもあります。

実際にUIを触ってみて、もし「こういう風にした方がいいのでは」と思えたらしめたものです。改善案を盛り込んだWebサイトを公開していくことで、Webの世界が一層よりよくなるでしょう。

また、技術的側面から学習テキストとして利用するものもいいです。例えば今回出たSPAの裏側がどうなっているのか。アーキテクチャについて考えるのもいいでしょう。もしまだ学んだことがなければFluxアーキテクチャについて冬休みにじっくり取り組んでみるのもいいかもしれません。

それから、過去のデザイントレンドをほじくりかえしてみるものおすすめです。といっても過去のShiftを見返そうというわけではなく、もっと以前のもの、インターネット以前のデザイン史です。

僕は地方へ出張に行くときでもここ何年か必ず持って歩いている愛読書があります。

この書籍はデザイン史で出てくるキーワードごとにまとめられていて、大きさも手頃で見返すごとに発見があります。今回紹介しているデザイントレンドも長い目でみればこうしたデザイン史の一幕になるのかもしれません。

実践面だけでなく、これら背後にある歴史、今をとりまく社会環境なども総合してWebデザイントレンドを楽しんでいただけたらと思います。

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

メッセージ:矢野さん

ご参加くださった皆様ありがとう&お疲れ様でした!
私自身毎年Shiftに参加することで、今年も充実した一年であったとやっと落ち着きた気持ちになれます。

今年は、これまで「Web業界」と括られていたクラスタが「メディア業界」になった年でした。ネット広告費用は2014年一兆円を超え、さらにスマートフォンの普及で広告費を販売促進費にシフトさせてアプリによるクーポン発行による販促を行う企業も増加しました。ソーシャルメディア広告がネット広告の内訳で大きな存在感を見せてきたのも今年の傾向です。

そのような状況の中で企業がWebをメディアとして活用するのは必然です。製品やサービスそのものだけではなく、それを取り巻くストーリーをソーシャルの話題に乗せる。これこそ来年のメディア業界、Web部門に課される大きな課題となるでしょう。

でもそんな大きい課題に対してどんなふうに挑んだらいいのかね。と私自身考えたのですが、昨年最も印象的だったアドバイスは、知り合いのYoutuberからの「動画のばあい、まず声張らないと全然伝わんない」でした。どんなに企画がしっかりしていても、Youtubeとう土俵のばあい「声張ってない」だけで即スキップ。ターゲットが誰であれ、大前提の質というのはどんなものにもあるんだなあ。と感じいった次第です。それはコードをチューンナップして表示速度を速くすることや、情報を整理して読みやすくしたり、色調を調整して見やすく整えることと同じことでしょう。トレンドがどう変わろうと、我々の培ったベーシックな力量は通用します。これからも一緒に変化を楽しみましょう。

メッセージ:坂本さん

Webデザイン担当の坂本です。年末のお忙しい中、ご参加いただきありがとうございました。

今年も様々なトレンドが紹介されましたが、個人的にもっとも象徴的だったのは「ずれ」だと思います。アップルウォッチに代表されるウェアラブルデバイスの登場(特に時計ですね)の登場により、必ずしも「画面が四角い」わけではないという状況がはっきりした結果ではないかと考えています。丸や楕円、多角形の画面のデザインを考えるなんて、昔は想像もできませんでしたよね。

Webサイト(いずれその概念すらなくなるのかもしれませんが)の目的によって、対応しなければならないデバイスや学ぶべき技術などはどんどん増えていくのかもしれませんが、その一方で「坂本の目」でお伝えしたように「やらなくていいことはしない」というような取捨選択も重要になってくるでしょう。

どんどん複雑になっているように感じられるWeb制作ですが、どのような形態になったとしても、必要なのはそのページを訪問するファンにどのようなことを伝えられるかと、それによってクライアントや運営者にどのような利益がもたらされるかということはあまり変わることはないはずです。

ブラウザのこちら側と向こう側の両方に人がおり、それをつなぐためのウェブであるということは、何も新しいことではありません。でも時には少しウェブを飛び越えてみる勇気を持ってみるのもおもしろいのではないでしょうか。

2016年も一緒に考え、学び、また元気にお会いできればうれしく思います。

動画

Shift9[#6]デザイントレンド from CSS Nite on Vimeo.

CSS Nite実行委員会

Shift9:Webデザイン行く年来る年(CSS Nite LP43)フォローアップ(7)江尻 俊章さん(環)

10 years 2ヶ月 ago

2015年12月26日(土)、ソラシティホールで開催したShift9:Webデザイン行く年来る年(CSS Nite LP43)のフォローアップとして、江尻 俊章さん(環)の『ウェブ解析トレンド』セッションのスライドなどを公開します。

ダウンロード

動画

<p><a href="https://vimeo.com/150105764">[LT]ウェブ解析士協会/江尻 俊章(環)</a> from <a href="https://vimeo.com/cssnite">CSS Nite</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
CSS Nite実行委員会

CSS Nite LP44「Webデザイントレンド(自治体編)+自治体サイトアクセシビリティ診断」が終了しました

10 years 2ヶ月 ago
CSS Nite実行委員会

CSS Nite LP42「戦略志向のECサイト」フォローアップを公開します

10 years 3ヶ月 ago
CSS Nite実行委員会

CSS Nite LP42「戦略志向のECサイト」フォローアップ(3)小清水 貴子さん(ゴンウェブコンサルティング)

10 years 3ヶ月 ago

2015年10月3日(土)、ソラシティホールで開催したCSS Nite LP42「戦略志向のECサイト」のフォローアップとして、小清水 貴子さん(ゴンウェブコンサルティング)による「戦略からコンテンツを導く」セッションのフォローアップを共有します。

メッセージ

セッション3「戦略からコンテンツを導く」を担当しました。小清水貴子です。

CSS Niteは初登壇でしたが、真剣に聞いてくださる雰囲気のなか、良い緊張感を持ってお話をすることができました。ありがとうございました。

-----------------------------

ガイドコンテンツが参考になった。事例も聞きたかったと多くの感想を頂きました。時間の制限もあり、また、一番重要なコンテンツが戦略コンテンツなので、ガイドコンテンツの事例は紹介しませんでしたが、機会があれば、ガイドコンテンツについても更にお話できたらと思います。

---

そのガイドコンテンツについて質問を頂きましたので、お応えしたいと思います。

「紹介されたガイドコンテンツが他を否定しているように感じますが良いのでしょうか?」

今回は文章すべてを読まなかったことと、一人暮らし、フローリングの部屋に住んでいる人の視点で説明したので、そう強く感じたと思いますが、また別の立場で読むと変わって感じると思います。ぜひ様々なユーザーの立場になって改めて読んでみてください。ユーザーの立場によりクリックする場所が変わってくると思います。

この、ほかを否定していると感じるのはガイドにとっては良いことです。

多くのサイトが「どれもよい」とだけ表現するため、ユーザーは結局のところ、なんとなくクリックしている状態です。

選べない程多くの選択肢の中から、最適な物を選ぶということも大切ですが、それ以上に、自分に最適では無いところをクリックしないと思える事がガイドコンテンツでは重要です。

---

戦略コンテンツもガイドコンテンツもそのサイトによって最適な形は変わります。どちらのコンテンツも思いのほか考えること、作ること共に時間がかかり、意図するものができるようになるには経験も必要です。

1日も早く、戦略コンテンツ、ガイドコンテンツに取り組んでいただき、コンテンツを作って売上につながることの手ごたえを感じていただけたらと思います。

CSS Nite実行委員会

CSS Nite LP42「戦略志向のECサイト」フォローアップ(2)村上 佐央里さん

10 years 3ヶ月 ago

2015年10月3日(土)、ソラシティホールで開催したCSS Nite LP42「戦略志向のECサイト」のフォローアップとして、村上 佐央里さんによる「戦略のフレームワーク 3C」セッションのフォローアップを共有します。

メッセージ

セッション2「戦略のフレームワーク 3C」を担当した村上佐央里です。


CSS Niteは初登壇でとても緊張しました。
もう少し楽しめるようにお話できたら良かったのですが、これから頑張りますね。
ご参加いただいた皆さん、本当にありがとうございました。

アンケートや懇親会でのお話をお聞きしまして、「3Cを成立させるのが難しい」という意見が多かったようなので、そこに少し触れさせていただきます。

●既存環境でなかなか難しい場合は、消費者に直接接しているサポートスタッフさんのお話をぜひ聴いてみてください(お客様窓口担当のスタッフさんなど)。

そこに「お客様が他に何を求めているのか」というのが埋もれている場合が多いです。

  • 味は好きだけど、ギフトパッケージがいまいちなのでギフトとして贈りにくい(パッケージの改善を求めている)
  • 印刷をお願いしたいのだけど、本当はその前によくわからないことの相談にのってほしい(サービスを求めている)

など、いろいろとでてきます。

その中で、自社の強みを活かして応えられそうなことを、
差別的優位点として生み出していくケースも多々あります。

●また、扱う商材が仕入品の場合は特に、差別的優位点を見つけるのが難しいですよね。
その場合「商品での差別化」よりも「サービスでの差別化」をおすすめします。

こちらは「引出物を宅配でお届けします」というサイトです。
http://www.angelexpress.jp/

元々、仕入品の引出物を売っていたお店ですが、「引出物を宅配してほしい」というお客様の声が増えたことを受け、「引出物宅配専門サイト」として立ちあげたものです。

大きくサービス業にシフトした事例です(ちょっと極端かもしれませんが)。

もちろん、現サイトで付加価値として「求めるサービス」を提供することも可能だと思います。
スタッフさんの専門知識などを活かして「コンシェルジュサービス」を展開するなど方法は色々と考えられますでしょうか。

そんな風に考えていくと、苦しかった3Cがワクワクするものに変わっていく時が必ずあると思います。
皆さまのご活躍を心より応援しています。

●ウェブディレクターさん向けにコラムを執筆しています。
よろしければのぞいてみてください。
http://webtant.net/category/column/blog96

CSS Nite実行委員会

CSS Nite LP42「戦略志向のECサイト」フォローアップ(1)権 成俊さん(ゴンウェブコンサルティング)

10 years 3ヶ月 ago

2015年10月3日(土)、ソラシティホールで開催したCSS Nite LP42「戦略志向のECサイト」のフォローアップとして、権 成俊さん(ゴンウェブコンサルティング)の「戦略をWebサイトに落とし込むウェブサイト5階層概念モデル」、「」セッションのフォローアップを共有します。

メッセージ

セミナー終了後の懇親会、アンケートでたくさんのご質問、ご意見をいただきました。
全てとても参考になります。ありがとうございます。

いただいたご質問、ご意見で最も多かったのは、セミナー後の鷹野さんからのご質問への回答でお話しした、「お客様を選ぶ」、「見積もりの費用をいただく」と言う点についてです。

「理想的だが、現実的に難しい」、「どうすればそれが出来るか」というご意見を多くいただきました。
これはとても重要な点で、私からも、ぜひウェブプロフェッショナルの皆様にお伝えしたい点です。

詳細は長くなりますので、ブログの方でご紹介させていただきました。
ぜひご覧ください。

その他の質問について、お答えします。

Q.伸びる見込みの低い市場の場合、コンサルを受けますか?

A.実はそういう依頼の方が多いです。
 その場合、強みを生かしたイノベーションを目的としてお受けしています。
 詳しくは、「Amazonにも負けない~」に出てくるエンジェル宅配さんの事例などをご覧ください。

Q.戦略から取り組んでも、クライアントの要望などで、実装段階で変わってしまう。これを回避する方法は?

A.そこは私たちにとっても簡単ではないです。
 コミュニケーションの時間をたっぷりとかけるのは一つのコツです。
 当社の場合、ismの会員になっていただき、1年かけて価値観と考え方を共有する、と言うこともやっているので、
 その点でもコミュニケーションが深まりやすいです。
 いずれにしても、クライアントとの話し合いに時間をかけるのはとても重要なことです。
 今やっている案件では、作業着手の前に、クライアントと5時間のmtgを10回やりました。
 おそらく、価値観を掘り下げることは、みなさんが思っている以上に重要で、皆さんが思っている以上に時間をかけています。

質問回答は以上です。

お知らせ

駒込会

私やゴンウェブスタッフと話をしてみたい、と思う方は、気軽に駒込会にご参加ください。
http://www.internet-strategy-marketing.org/company/komagome.html

無料会員登録

セミナー情報が欲しい方は、ism無料会員登録をどうぞ。
http://www.internet-strategy-marketing.org/menber-free/

----------------------------------------

求人

ウェブデザイナー、ism事務局スタッフを募集しております。
ご興味のある方は気軽にご連絡ください。

ngon@gonweb.co.jp

Facebook友達申請も大歓迎です。
https://www.facebook.com/narutoshi.gon

動画

CSS Nite実行委員会

CSS Nite LP42「戦略志向のECサイト」フォローアップ(7)岩本 庸佑さん(ギャプライズ)

10 years 3ヶ月 ago

2015年10月3日(土)、ソラシティホールで開催したCSS Nite LP42「戦略志向のECサイト」のフォローアップとして、岩本 庸佑さん(ギャプライズ)による「間接効果だけではない、売上を上げるユーザーレビューの使い方」セッションのフォローアップを共有します。

メッセージ

セッション8「間接効果だけではない、売上を上げるためのユーザーレビューの使い方」を担当したギャプライズの岩本です。

今回のセッションにて時間が足りなくなってしまってすいませんでした。
お話させて頂いたその先がユーザーレビューマーケティングの更なる「核」のパートになります。
スライドのNo,63以降を是非ご確認ください!

セッションの中でお話しさせて頂きましたがユーザーレビューはネガティブなコメントを懸念されて取り組まれないことが多くあります。
しかし、一般的なユーザーレビューの効果だけでも導入に対して前向きになれるかと思います。
更に、マーケティング(集客)に生かすことができればユーザーレビューの導入、促進はECサイトにとって有効な施策なはずです。
是非、社内で再度検討してみてください!

また、弊社が国内で展開しているレビューマーケティングツール、YOTPO,(ヨットポ)を活用頂くとスライド内の施策実装が比較的簡単に導入が可能です。
お気軽にお問合せください。
http://www.yotpo.jp/

頂きましたご質問につきまして

●転職サイトへのユーザーレビュー活用

案件ごとのユーザーレビューとして頂くのは難しいと思います。
サイクル等も早いと思いますし、Webの問い合わせタイミングでは何も答えが出ていないため。

一方で、サイト、サービスについてのユーザーレビューを頂くことは可能です。
それによりサイト自体のUI等の改善、又はサービス、質の担保等に生かすことは可能ではないでしょうか。

●モールにおけるユーザーレビュー

今回のお話はまさに自社サイトについてのお話でした。
しかし、一般的に言われている範囲でモール内でのSEO対策(検索上位表示)にはレビュー情報は要素になっていると思います。
なので、多くの良いレビューを集めることは有効なのではないでしょうか。

合わせて、
ユーザーの購買行動上に必要情報としてはユーザーレビューはモールの中でも変わらないと思います。
事実、私自身も「商品の決定」「お店の決定」にはレビューを見ます。
一方で信憑性の部分が気になるので(個人の主観です。)、より多くのレビューを見るようにしています。
または、価格comのようなトコに商品レビューは別で見に行くこともあります。

動画

CSS Nite実行委員会
確認済み
1 分 40 秒 ago
「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント。都内のほか、大阪、名古屋、青森、福岡、沖縄、秋田、札幌、福井、仙台、福島、広島、新潟、京都でも開催。
CSS Nite公式サイト フィード を購読

人気記事トップ10

人気記事ランキングをもっと見る