CSS Nite公式サイト

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

11 years 10ヶ月 ago

2013年12月14日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)のフォローアップとして、原 一浩さん(Greative)、矢野 りんさん、坂本 邦夫さん(フォルトゥナ)の『デザイントレンド: キャプチャで振り返る2013年 』セッションのスライドなどをシェアします。

ダウンロード

長時間のイベントの一番最後ということで、お疲れのところ最後まで聴いていただきありがとうございました。
セッションを担当した、原、矢野、坂本からのフォローアップコメントは以下となります。

坂本邦夫

デザイントレンドに登壇した坂本です。長時間のセミナーでしたが、最後のセッションまでお付き合いいただいた皆様、本当にありがとうございました。

今年は良くも悪くもフラットデザインという印象でしたが、Webサイトの「構造」そのものの変化を感じた年でもありました。

1ページにつき1枚のHTMLファイルという形式が普通でしたが、ランディングページが登場したり、PC以外の様々なデバイスが普及して「アプリ」が一般的になった今となっては、もしかすると旧来の構造はかなり古いものになったのではないかと感じたりもしており、私自身も大きく意識が変わった年となりました。

今回のセッションを見ていただいてもわかる通り、誰が見てもわかるくらい、Webサイトの見た目は変わっていますが、その一方で発注者側が考えるWebサイトの目的が大きく変わってきたわけではないはずです。私自身、トレンドを気にしつつ、クライアントの利益のために最適なデザインを追求することを来年も続けていきたいと思います。

話は変わりますが、昨年開催されたShift6のフォローアップメールで、「今までおまけのような扱いであったファビコンに変わり、イメージを左右するスマートフォン用のホームアイコンが、デザインの主役に躍り出るかもしれないとも感じています」などと書いたのですが、Windows8に加えて、iOS7が一気に推し進めてしまいまして、ほんとにファビコンが作りやすくなったなぁと感じております。

また来年もどこかでお会いできればと思っています。
皆様、どうぞよい年をお迎え下さい。

原 一浩

今年のデザイントレンド、トレンド自体は昨年からの地続きな状態でしたが、アーカイブをするという意味では2013年はターニングポイントと言えるなあと感じました。

Webサイトを静的なキャプチャで保存することは、今後ますます難しくなりそうだという確信があります。ユーザの操作軸、時間軸、画面サイズの観点によって変化するタイプが増えてくる時代に、どうやって「記録」としてそれらを残していくかという課題に突き当たります。

きっと、これらの課題は archive.org のようなサイトにとっても大きな課題となっているのではと推測します。

デザイントレンドは7年目ですが、上場企業や自治体のキャプチャを取り始めて5年となります。次の時代のアーカイブに向けて試行錯誤と続けていこうと思います。

本年もありがとうございました。来年もよろしくお願いします。

矢野りん

セッションでお伝えし漏れた部分について言及しますと..

  • マルチウィンドウに配慮したサイトは文字数が減り、文字サイズがどんどん大きくなってきている
  • 文字より画像によるコミュニケーションに重きがおかれるようになった
  • スタティックなサイトは運用よりもインパクト重視。続きはSNSで。

といった傾向が感じられた2013年でした。

ところで近年は、ネットを駆使した宣伝行為はSNSやリスティング広告、独自ドメインにひもづいたサイトをまんべんなく運用することで結果が出る可能性が見えてきます。チャネルの分散が1つのサイトの内容を薄くさせているわけですね。サイトデザインはますます、マーケティングストラテジーなしに成り立たなくなってきていると言えるでしょう。

では、将来のサイトデザインのトレンドは、マーケティング担当者が作るのか?というと、そうもいかないケースが多いと考えます。実装技術の知識があり、かつ、デザインセオリーを知っている「Webデザイナ」が、包括的なトレンドづくりの責任を負うことになると私は予想しています。
ツメツメ系レイアウトを眺めながら、Webデザイナーの責任範囲の広がりを予感した2013年でした。また来年、どんな立ち位置でトレンドを把握することができるのか、今からとても楽しみです。

CSS Nite Shift7[8]デザイントレンド: キャプチャで振り返る2013年 from CSS Nite on Vimeo.

CSS Nite実行委員会

CSS Nite LP31: Webデザイン行く年来る年(Shift7)フォローアップ(7)春日井 良隆さん(日本マイクロソフト)

11 years 10ヶ月 ago

2013年12月14日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)のフォローアップとして、春日井 良隆さん(日本マイクロソフト)の『OSのフラットデザインを考えてみる 』セッションのスライドなどをシェアします。

ダウンロード

この夏のiOS7の発表を機に”フラットデザイン”に注目が集まりました。この動きに呼応するかのようにGoogleがGoogle PlayのUIを刷新、AndroidのUIにも変化が見られ、Yahoo! Japanはトップページのアイコンを平面的なデザインに変更しました。

いまなぜフラットデザインなのか?

UXエバンジェリストとしてWindows 8のモダンUIをお伝えしてきた私は当然、この動きに興味を持ち、各社のガイドラインを始め、国内外のニュースやブログ、スライドをチェック、知り合いと飲んでみたりもしながら得られた自分なりの知見と、立場的に最も精通しているマイクロソフトのデザイン思想をまとめたものが、ご覧頂いたプレゼンテーションです。

ファイルには引用元のリンクや時間の都合上、ご紹介できなかったスライドも含まれています。よろしければ復習代わりにご覧ください。

フラットデザインがこのまま定着するのか、一過性のブームで終わってしまうのか?来年の動きに目が離せません。

春日井 良隆
日本マイクロソフト UXエバンジェリスト

CSS Nite Shift7[7]OSのフラットデザインを考えてみる from CSS Nite on Vimeo.

CSS Nite実行委員会

CSS Nite LP31: Webデザイン行く年来る年(Shift7)フォローアップ(6)森本 恭平さん(NTTレゾナント)

11 years 10ヶ月 ago

2013年12月14日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)のフォローアップとして、森本 恭平さん(NTTレゾナント)の『スマホの検証が10倍はかどる!Remote TestKitの紹介 』セッションのスライドなどをシェアします。

ダウンロード

森本さんから

Remote TestKitをご紹介させていただきました。森本です。

いくつかアンケートの中で、質問をいただきましたので、解答させていただきます。

セキュリティが気になるのですが?
Remote TestKitはレンタル終了後、端末は初期化されます。検証中にインストールされましたアプリや閲覧したサイトなどの情報につきましては全て削除されます。
また、弊社の端末は全てデータセンター内に保管されておりますので、弊社の社員が中を閲覧出来るなどもございません。安心してご利用ください。
アプリ開発では使えるのか?
少しアプリ開発の話になってしまいますが、Remote TestKitはUSB接続しているのと同じようにadbコマンドが端末に対して行えますので、実機があるのと同じように開発をすることが出来ます。
Eclipseなどでのビルドの際に対象を弊社の端末に設定していただければ、そのまま実機での検証が出来ます。
月額や定額払いは無いのか?
Remote TestKitでは様々なお支払い方法や料金プランがございます。詳しくはこちらのサイトを御覧ください。Remote TestKit ご提供価格

Webサイトの制作でもアプリの制作でも、検証のフェーズは時間が無かったりすると思いますので、ネットワークさえあればいつでもご利用いただけます。Remote TestKitでは、無料の端末もご用意しておりますので、ぜひ試していただければと思います。

CSS Nite Shift7[6] スマホの検証が10倍はかどる!Remote TestKitの紹介 from CSS Nite on Vimeo.

CSS Nite実行委員会

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

11 years 10ヶ月 ago

2013年12月14日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)のフォローアップとして、たにぐち まことさん(エイチツーオー・スペース)、矢野 りんさん、松田 直樹さん(まぼろし)の『スマートデバイス 2013 → 2014 』セッションのスライドなどをシェアします。

ご参加の皆さん、2013年もおつかれさまでした。スマートフォンセッションからは、スマートデバイスと今とこれからについて、調査結果や予測などを交えながら紹介をしていきました。

矢野りん

矢野のミニセッションの補足をします。

スマートフォンのようにスキマ時間に活用されるコンテンツむけのUIデザインは「多くのユーザーを満足させる限りなく完全に近いデザイン」を目指すことは間違いです。
まずはターゲットユーザーのし好をヒントに短期間でつくった「モック」を公開して、ユーザーの反応をヒアリングし、仮説を立ててどんどん改変しながらまたユーザーの反応を調査するという「イテレーションサイクル」をいかにスムーズにまわし続けるか。が、勝負です。あのセッションもそういうプロセスを前提にして初めて価値がでる話です。
とはいえ、受託のプロジェクトではイテレーションより手離れが重要なのは間違いありません。手離れと改良の両立は、改良しやすいコンテンツを納品することで可能です。
改良しやすさに目をむけると、CSSに対するSassやJSに対するAngularJSのような他人が書いたソースに悩まされないフレームワークを知っておく重要性もわかってきます(コードのセッションで触れられていましたね)。デザインのみならず、Shift7で網羅されていたさまざまな技術トレンドは、じつは1つの大きな流れを支えていることがわかります。
育てる余地のある設計。レスポンシブのような実装作法にこだわらず、この設計思想とどう向き合うかが2014年で最も重要になることは間違いありません。

松田直樹

スマホ目線でのRWDの今年、これからの進化について、フロント実装面からお話をいたしました。ただ「技術をもっと磨こう」ということではありません。

スマホを始めとした様々なデバイスに対して、皆さんが思い描かれるベストなWebサイトを表現する手法がどんどん増えているということなんですね。設計がデバイスのスペックに足を引っ張られることがなくなり、より設計の重要性が増す、という未来です。この点お伝えできていればうれしい限りです。皆様ありがとうございました。

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

RWDはサイトが重くなるってよく聞くけど、実際の所パフォーマンスはどうなんでしょうね?
RWDだからといってサイトのパフォーマンスがほぼ落ちることはありません。もし重くなるようでしたら、スマホ専用サイトを作ったとしても同じ結果が待っています。初期の設計次第でしょう。具体的には、画像は適切なサイズで使用する、読み込むファイル数を抑えてHTTPリクエストを減らす、過度なJSによる演出を省く、などで大幅に改善できることでしょう。(松田)

たにぐちまこと

2014年以降は、スマホ・タブレットはもちろんですが、ウェラブルデバイスなどの新しいデバイスもますます登場してくると思います。その時、私たちはどんなWebを提供することができるのか。一緒に考えていきましょう!

 

CSS Nite Shift7[5]スマートデバイス 2013 → 2014/たにぐち まこと from CSS Nite on Vimeo.

CSS Nite実行委員会

CSS Nite LP31: Webデザイン行く年来る年(Shift7)フォローアップ(4)鷹野 雅弘さん(スイッチ)、石嶋 未来さん(ザ・マーズナレッジ)

11 years 10ヶ月 ago

2013年12月14日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)のフォローアップとして、鷹野 雅弘さん(スイッチ)、石嶋 未来さん(ザ・マーズナレッジ)の『ツールと制作環境2013-2014 』セッションのスライドなどをシェアします。

イシジマのコメント

掛け合いの部分で少し聞きづらくしてしまったトコロがあり、すいませんでした。次回はもっと鷹野さんと息を合わせられるように頑張ります。まずは拳法からですかね。Slicyのデモで間違ってしまった命名ルールですが、「hoge.png@2x」と後ろに付けるのが正しいものでした。

各種ツールのURLを教えて!
プラグインを便利に管理できるPackage Control
Package Control - the Sublime Text package manager
保存と同時にブラウザを更新してくれる
BrowserRefresh-Sublime
簡単にローカルサーバーを起動できる
SublimeServer
lorempixel(サンプル画像サービス)を保管してくれる
SublimeLoremPixel
画面を分割してくれるアプリ ※Macのみ
Divvy
書き出しがラクになる
Slicy
良く使うパーツを登録して再利用
Pixel Dropr
PSDのままインタラクションレビューができる
Composite
便利なテンプレートたくさん
DevRocket
PhotoshopからSVG書き出し
Zeick
便利なツールを覚える時間の取り方
プロジェクトの序盤はゆとりがあるので、そのときのワイヤーフレーム作りや融通が聞きそうな小規模案件などで導入してみたりしています。またブログを書くようにしていくと良く。調べて理解したらその解説記事を書く。というのは覚えやすいですね。
新しいソフトを使うと効率良くなりますか?
制作を取り巻く環境が変わってきているので、新しいツールはやはりそれに即しています。今まで手間がかかっていたものが1stepで出来るようになるという点では効率化に繋ります。一長一短なので自分が面倒と感じている作業をツールによってラクできないかとふと思ったときに探してみると良いかもしれません。

鷹野のコメント

今回は、イシジマさんと組んでみましたが、いかがでしたでしょうか? アンケートや懇親会でいただいたコメントなどに返答しますね。

アドビに対して辛辣すぎませんか?「ウソです!」とか...
たとえば、Illustrator CCからFireworks CS6には、パスのコピー&ペーストができません。従来も、Illustratorのバージョンが同じか下でないとできなかったのですが、Fireworks CS6を使い続ける場合、せめてIllustrator CCからパスのコピー&ペーストができないと仕事になりません。CCが正式リリースされて半年たちますが、こんなことすらケアされていないんです... 少なくてもFireworks CS6がメンテナンスされるという期待は捨てた方がよいでしょう。
で、ポストFireworksは、Photoshopってことなのですか?
あくまで個人的は見解ですが、レイアウトツールはドローベースに限ると考えています。Illustrator、Photoshop、Fireworksそれぞれ、本を書くくらいに使い込んでいますが、WebのレイアウトにはFireworksが最適。でも、これがなくなるなら、Illustratorかな?と試行錯誤しています。でも、かなり悩ましい(これとかこれ)。Photoshopは写真をいじるツールで、レイアウトを行うツールではないと私は考えています。
でも、今回、ご紹介したPhotoshop周辺のソリューションは魅力的です。で、今後、SVGが増えていくと、やっぱりIllustratorかな、と思っていたりします。

こちらもご覧ください

CSS Nite Shift7[4] ツールと制作環境2013-2014 from CSS Nite on Vimeo.

CSS Nite実行委員会

CSS Nite LP31: Webデザイン行く年来る年(Shift7)フォローアップ(3)植木 真(インフォアクシア)さん、山本 和泉(#fc0)さん、中根 雅文(慶應義塾大学)さん

11 years 10ヶ月 ago

2013年12月14日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)のフォローアップとして、植木 真(インフォアクシア)さん、山本 和泉(#fc0)さん、中根 雅文(慶應義塾大学)さんの『AccSellポッドキャスト公開録音「izuizuのアクセシビリティ(生)100本ノック!」』セッションのスライドなどをシェアします。

「アクセシビリティ」のセッションに登壇した三人それぞれから、メッセージをお届けします。

植木 真

100本ノックではコーチ役の植木です。昨年は、アクセシビリティは「あたりまえ」というメッセージが中心でした。そして、今年はカルーセルを題材にやや実装寄りの内容でお届けした公開録音でしたが、いかがでしたか?

そもそも、カルーセルには賛否両論がありますし、ユーザビリティテストの結果の多くはその効果に疑問符を投げかけています。しかし、使わざるをえないケースというのも、現実的にはあるでしょう。アンケートでも「ファッション業界のサイトでは、カルーセルが不可欠です」というようなコメントをいただきました。

カルーセルといっても、さまざまなタイプ/パターンがありますよね。ですから、もしカルーセルを採用する際には、いろいろなユーザーの利用環境を想定して、一つ一つの機能をどのように実装するのがよいかを検討することが重要です。公開録音の中では、そのヒントをいくつか提示させていただきました。

もし今後カルーセルを実装する機会があれば、是非より多くのユーザーが利用できるように工夫してみてください。あ、AccSellにお便りいただければ、皆さんの作ったカルーセルを100本ノックで取り上げさせていただきます。もしカルーセル以外でも、こういう場合にアクセシビリティを確保するにはどうしたらいいんだろう?と思うコンテンツがあれば、ぜひお気軽に! 皆さんからのネタをizuizuが首を長くして待っているはずです。

さて、最後にお話したように、2020年の東京オリンピック&パラリンピックの開催が決まりました。そして、障害者差別解消法という法律も2016年4月からの施行が決まりました。より多くの人が、より多くの場面で、より多くの利用環境からアクセスできるかどうか、日本のウェブの品質が問われるようになる気がします。アクセシビリティがもっと「あたりまえ」になるように、来年も皆さんと一緒に考えていけたらと思っています。

中根 雅文

今回の企画の過程から、なぜかいきなり監督にされてしまった中根です。アクセシビリティのセッション、お楽しみいただけたでしょうか。

アクセシビリティというと、障碍者のためのものという印象を持っておられる方が多いと思いますし、実際、一番大きな恩恵を受けるのも障碍者だと思います。が、本来は障碍の有無だけでなく、様々な環境で様々なブラウザを使うあらゆる人にとって正しく情報を伝えるための考え方です。

30分という限られた時間のセッションでは、既にこの分野に取り組んでおられる方にとっては物足らない、そしてあまりなじみのない方には理解しづらい内容になってしまったのではないかと思います。このセッションを、アクセシビリティについて改めて考える、あるいは新たに興味を持つきっかけにしていただけたのであれば嬉しいのですが。

興味を持っていただけた方は、ぜひAccSellのサイトを覗いてみてください。

さて、アンケートの中で、動的なページやモーダル・ウィンドウに関する注意点などを知りたいというものがありました。ケース・バイ・ケースなので一概にこうである、ということは言えないのですが、簡単に一般論を記しておきますので参考にしてください。

ご質問:Javascriptで動的にDOMを生成するようなものやGmailのようなWebアプリケーションってどうなんですか?モーダルウィンドウなども。使う際の注意点なども知りたいです。
セッションの中でもお話ししましたが、スクリーンリーダーで読み上げる場合、基本的にHTMLのソースやDOMツリーの中での出現順序に従って読み上げられます。ですから、例えばあるボタンをクリックした後に何らかの動的な変化が発生する場合、その変化が発生する場所とボタンの場所のDOMツリー的な位置関係が重要になってきます。もしこれらが離れすぎていると、変化したことにユーザーが気づかない可能性があります。では近ければ良いかというと、おそらくそれだけでは不十分で、多くの場合はクリックしたボタンの直後でないと気づかれない可能性が高いでしょう。
モーダル・ウィンドウの場合も、同様に気づかれない可能性について考える必要があります。この場合はさらに深刻で、気づかれなければモーダル・ウィンドウ内でアクションを起こすこともできないわけで、他のことが一切できなくなってしまうことになります。
こういった動的なコンテンツをよりアクセシブルにするための仕組みとして、WAI-ARIAという仕様が検討されていて、これを実装するスクリーンリーダーも増えてきています。今後、こういったスクリーンリーダーが増えれば、動的でアクセシブルなコンテンツを今よりも容易に実現できるようになることが期待できます。
こういった話題についても、折に触れて最新動向をAccSellのサイト上やポッドキャストの中でお届けしていきますので、ぜひ活用してください。

山本 和泉

100本ノックを受けたizuizuこと山本和泉です。去年に引き続き、公開録音でしたがいかがでしょうか?

アンケートを拝見して「カルーセルを採用しているサイトをよく見かけるから使ってもOKなのかと思っていた」「疑問に思ってなかったけど、やっぱりそうだったのか」というようなコメントをいくつかいただきました。ありがとうございます。

私もカルーセルに限らず、また、アクセシビリティに限らず「最近よく見かけるから使うほうがいいのかな」と思うことがあります。そう思ったときって、意識が制作側になっていて「ユーザー側になっていない」ときがほとんどで、いい結果をなかなか出せない場合も少なくありません。

なにかと新しい技術やトレンドに目がいってしまいがちですが、そのときに「伝えたい情報を視覚だけに頼っていないか」などを一呼吸おいて考えなおさないとだな思います。今回は私自身も改めて確認させられたテーマでした。

みなさんも中根監督と植木コーチの指導を一緒に受けて見ませんか? セッション中にもお伝えしましたが「たとえばこれはアクセシビリティどうなの?」というテーマをお待ちしています!

ポッドキャストとイベントのお知らせ

当日の録音とそれを振り返るポッドキャストを公開しました。無料でお楽しみいただけますので、ぜひ聴いてみてください。

そして、公開録音の最後に告知させていただいたイベント「AccSell Meetup #004」のFacebookページを用意しました。正式なお申し込み開始時には、こちらでアナウンスさせていただきますので、ご興味のある方はまず「参加予定」で仮エントリーをお願いします! iOSのVoiceOverを使ったコンテンツのチェック方法やアクセシブルなコンテンツ制作の基本などを分かりやすくレクチャーします。

CSS Nite Shift7[3] AccSellポッドキャスト公開録音 from CSS Nite on Vimeo.

CSS Nite実行委員会

CSS Nite LP31: Webデザイン行く年来る年(Shift7)フォローアップ(2)益子 貴寛さん(サイバーガーデン)、小山田 晃浩さん(ピクセルグリッド)

11 years 10ヶ月 ago

2013年12月14日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)のフォローアップとして、益子 貴寛さん(サイバーガーデン)、小山田 晃浩さん(ピクセルグリッド)の『新しいマークアップ環境にキャッチアップ!』セッションのスライドなどをシェアします。

益子から

コンビ3年目、ピクセルグリッドの小山田さんと一緒に、マークアップセッションを担当した益子です。

ここ一年の話題を、だいぶムダなく伝えられた感触です。エンジニアではない人も、今回のセッションで聞いた言葉をなんとなくおぼえておいて(「なんとなく」でも言葉や考え方を知っていることが、とても大切ですね)、仕事に生かしていただけたらうれしいです。

東証上場企業のDOCTYPEの調査結果は、今度まとめて、どこかで公開しようかと考えています。時間の関係で含めなかった「考察」も、どこかで発表できればと(disりまくりのマズイ話もありそうなので、一部ツイート禁止とかで)。ネタのオンパレードというか、かなりおもしろい話ができそうです。

お世辞やお愛想、また関係者のひいき目なしに、ひとりの聞き手として、すべてのセッションとも得ることが山盛りでした。マジメななかに笑いもたくさんで、楽しかったです。単純に「知識のデリバリー」だけではなく、長丁場だけど参加してよかったと思ってもらえるような「楽しい時間づくり」に、出演者とスタッフはいつも心を尽くしていて、それがきちんと果たせたイベントになったと思うのです。

来年も、みなさんとお会いできたら幸いです。

小山田から

益子さんとともにマークアップセッションを担当した小山田です。ご紹介した内容、いかがでしたでしょうか。

確実に、方法やツールが変わってきていると感じている方も多いかと思います。特に、Webページはパーツの集まり、という考え方は今後も多くのWebサイトで取り入れられていくでしょう。そのベースとなるBEMの考え方をまずは意識してみるといいでしょう。

また、Sassについては、勉強し始めたというかたはぜひCSS Nite LP, Disk 32: Sassにご参加いただくといいでしょう。また、すでに使われているという方も、今後Sassのバージョンも順調に上がり、Sass 3.3が正式リリースされる予定です。より便利になる環境を手に入れ、周りの人のレベルにいつでも合わせられるようにしておくといいでしょう。

さて、アンケートの中でいくつかご質問いただいた内容をここで回答とともに共有します。

Q:ChromeがBlinkを採用したら、ベンダープリフィックスはどうなりますか?

Chrome上でも、しばらくは-webkit-が利用され続けます。これは、Chrome(Blink)はあくまでもWebKitの枝分かれであり、ベースはWebKitだからです。一方で、少し先を見ると、Blinkでは、ベンダープリフィックスは極力利用せず、設定画面で有効/無効を変更する仕組みになるようです。つまり、今あるWebサイトを、Blink用に作り替える必要はありませんのでご安心ください。

Q:クラス名の文字数が長いと感じたのですが、管理しやすいのでしょうか?

名前は常に衝突するという不安がついてまわります。BEMではそれをルールで解決することができます。残念ながら、そのクラス名は長くなってしまいますが、衝突する心配はなくなります。たとえば、class="title"よりは、 class="contenttitle"class="producttitle"のほうが、衝突する危険は少ない、というわけです。

Q:SMACSS、BEMも取り入れつつ、なかなか設計の勘どころがむずかしく、後悔することが多々あります。うまいトレーニング(思考方法)はないでしょうか?

ワイヤーフレームやデザインの段階である程度設計されていることが重要になります。デザイン上の表現のブレがあった場合、それは「デザイナーのミス」なのか、それとも「意味があって違うのか」など、実装者はデザイナーと綿密に問題点を共有するといいでしょう。「意味があって違う」場合には、BEMでいう「Modifier」で調整するとうまく収まるはずです。

あとは、数をこなして経験をしましょう。小さいWebサイトでも、1000ページあると仮定して、パーツを分解し、最初からページをつくるのではなく、まずはスタイルガイドをつくり、そのあと、スタイルガイドからパーツを抜き出して実際のページを作成するという手順をとるといいでしょう。

Q:ベンダープリフィックスの「-webkit-」はもう使えませんか? いままで使っていたハックはどうなりますか?

一つ目のご質問はすでに上記と同じ内容ですね。CSSハックについては、あくまでもブラウザーの不具合を利用した、あまりよくないバッドノウハウですので、できるだけ使わず、Modernizrによるフィーチャーディテクションを活用するといいでしょう。

CSS Nite Shift7[2] 新しいマークアップ環境にキャッチアップ! from CSS Nite on Vimeo.

CSS Nite実行委員会

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

11 years 10ヶ月 ago

2013年12月14日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年(Shift7)のフォローアップとして、長谷川 恭久の『基調講演:スクリーンの先、私たちの仕事の先 』セッションのスライドなどをシェアします。

ダウンロード

昨年と同様、Web が大きく変わった 2013 年。変化の波は年々増すばかりで、大変と思うこともあると思います。アプリ、サービス、イーコマース、キャンペーンなど、Web とひとことで言っても様々な関わりがありますし、仕事の仕方やデザインアプローチも千差万別です。利用者が多様化しただけでなく、わたしたち Web プロフェッショナルも多様化しています。Web デザイナーといっても、もう同じように働く Web デザイナーはいないのではないでしょうか。

こうしたなか、自分の仕事に合う制作のノウハウを学ぶのも一苦労です。数年前であれば、セミナーに参加して、書籍を読んで勉強すればよかったことも、そのまま適応は難しいだけでなく、仕事環境やクライアントとの関係を変えなければ、改善しないことも多々あります。もうひとりの持ち場を守って働くというやり方では、フリーランスですら難しいわけです。

難しくなった大きな理由は、「Webが変わった」からといえますが、言い換えると「Webは人に近づいた」になると思います。近い存在だからこそ、多様化になったのでしょうし、ひとりで作れなくなったのでしょう。ひとりの作り手として、これからどのように設計や、ビジネスの成長に貢献すればいいのでしょうか。それは、作る人間にしか分からない視点やアプローチを積極的に出していくことだと思います。

基調講演では、「スクリーンの外」をテーマに話しました。これは、通常作り手の評価の対象になる「スクリーン上の設計」という枠組みから離れてデザインをみるというメッセージがあると同時に、自分たちの仕事の枠組みの外に出て考えてみようというメッセージが含まれていました。観察は「外」をみるひとつの手法ですし、他にもいくつかあります。今まで気付かなかった意外な側面が、作る仕事の役に立つはずです。

CSS Nite Shift7[1] 基調講演: スクリーンの先、私たちの仕事の先 from CSS Nite on Vimeo.

CSS Nite実行委員会

CSS Nite:2013年のベストセッションを選出しました

11 years 10ヶ月 ago

2013年、CSS Niteでは76回の関連イベントを通して278セッションが行われました。 のべ参加人数は7,011人。

ちょっと時間がたってしまいましたが、2013年のベスト10セッション+αを選んでみました。

「全部はチェックしきれないので、これは!と思うものをチョイスして欲しい」という声をよくいただくため、2010年からベストセッションを選定して発表しています。

つまり、ぜひ、内容をチェックいただきたいという意図で選出しているため、非公開のセッションは「選外」としています。

選出したもの以外にも、素晴らしいセッションがたくさんありました。登壇された方、ご協力いただいた方々、そしてご参加くださった方、改めてありがとうございました。

再演等のオファー

CSS Niteのセッションの再演、および、講演者へのオファーは自由に行ってください。ご連絡いただければ告知協力など行いますが、許可を取っていただく、等の手順は不要です。

CSS Nite実行委員会

CPI x CSS Nite「After Dark」(7) 『Webで使うIllustrator、そして明日から使うSVG』が終了しました

11 years 10ヶ月 ago

2014年2月19日(水)、KDDIウェブコミュニケーションズ セミナールームでCPI x CSS Nite「After Dark」(7)『Webで使うIllustrator、そして明日から使うSVG』を開催し、30名くらいの方にご参加いただきました。

P1380373.jpg

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

CSS Nite実行委員会

CSS Nite back2basic 2014を3-4月に開催します。

11 years 10ヶ月 ago

2012年に開催していたCSS Nite back2basicシリーズの2014年版を開催します。今回は、Stocker.jp / Spaceを会場に、「平日午後にセミハンズオン」というスタイルでお送りします。

なお、「back2basic」(back to basic)は「基本に立ち戻る」といった意味合いです。

banner-back2basic2014.png

20122014
開催平日夜平日午後
時間1.5H3.5H
スタイル聴講セミハンズオン
開場KDDIウェブコミュニケーションズ
セミナールーム
(麹町)
Stocker.jp / Space
(渋谷)
人数32-60名24名

季節柄、新人/配置換えなどの企業研修の一環としてご利用いただければ幸いです。

日付テーマと講師主な対象
DMEDRM
3月18日(火)オリジナルテーマで作る、WordPressサイト構築
/たにぐち まこと(エイチツーオースペース)
 OK  
3月19日(水)あなたはホントに大丈夫?
アクセスログ解析、データ分析の基本。

/中川雅史(アンティー・ファクトリー)
 OKOKOK
3月20日(木)肩書だけのWebディレクターにならないために
知っておくべき3つのこと

/轡田 高志(YUKIKAZE)
  OKOK
3月25日(火)はじめから Googleアナリティクスを学ぼう(初心者向け)
/田中友尋(ハマ企画)
OKOKOKOK
3月27日(木)HTML5文法を徹底的に身につける
/益子 貴寛(サイバーガーデン)
OKOK  
3月28日(金)Webサイトの改善提案トレーニング
/益子 貴寛(サイバーガーデン)
OKOKOKOK
4月1日(火)WebデザイナーのためのPhotoshop神速テクニック
/庄崎 大祐(Stocker.jp)
OKOK  
4月2日(水)Webデザイナーも活用したい
Illustratorの基本と使いどころ

/鷹野 雅弘(スイッチ)
OK OK 
4月3日(木)エラー・デバッグから学ぶJavaScript / jQuery入門
/西畑 一馬(まぼろし)
OKOK  
4月8日(火)あなたはホントに大丈夫?
アクセスログ解析、データ分析の基本。

/中川雅史(アンティー・ファクトリー)
 OKOKOK
4月9日(水)Webデザイナーでも知っておきたい
PHPとプログラム基礎知識

/たにぐち まこと(エイチツーオースペース)
OKOK  
4月10日(木)Webデザイナーでも最低限おさえておきたい
Excelの基礎知識、使いどころ

/鷹野 雅弘(スイッチ)
OKOKOKOK
4月15日(火)肩書だけのWebディレクターにならないために
知っておくべき3つのこと

/轡田 高志(YUKIKAZE)
  OKOK
4月16日(水)オリジナルテーマで作る、WordPressサイト構築
/たにぐち まこと(エイチツーオースペース)
 OK  
4月17日(木)HTML5文法を徹底的に身につける
/益子 貴寛(サイバーガーデン)
OKOK  
4月18日(金)Webサイトの改善提案トレーニング
/益子 貴寛(サイバーガーデン)
OKOKOKOK

主な対象のD、ME、DR、Mは、あくまでも目安です。

DMEDRM
デザイナーマークアップディレクターマーケッター
CSS Nite実行委員会

CSS Nite LP32「Sass」が終了しました

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

CSS Nite LP33「UI/UX」再演版を4月26日に開催

11 years 10ヶ月 ago

CSS Nite LP33「UI/UX」再演版

2014年4月26日(土)ベルサール九段 イベントホールでCSS Nite LP33「UI/UX」再演版を開催します。

次の6セッションを予定しています。

  • IAシンキングで進める体験とコンテンツの構造化
    /坂本 貴史(ネットイヤー)
  • UIデザインのパターン化と効果的な実践方法
    /池田 拓司(クックパッド)
  • 人間だからこそできる、気配りデザイン
    /秋葉ちひろ(ツクロア)
  • アプリケーションのイディオムデザイン
    /上野 学(ソシオメディア)
  • ディレクター・デザイナーのためのプロトタイプ制作とシナリオ作り
    /土屋 尚史(グッドパッチ)
  • 問題解決のためのプロトタイピング
    /深津 貴之(ギルド)

同様の内容を3月29日に開催するのですが、こちらが40時間で満席となってしまったため、再演版を開催することになりました。

再演版の残席も少なくなりつつありますので、お早めにどうぞ。

CSS Nite実行委員会

「Webデザイントレンド」スピンアウト再演版(青森、岡山、大阪で開催)

11 years 11ヶ月 ago

Shiftシリーズの人気コンテンツ「Webデザイントレンド」セッションの再演+α企画を、静岡、青森、岡山にて開催予定です。

各イベントともに、ロングバージョンに加え、地元のスピーカーを交えてのスペシャル版です。

WebDesignTrend2014-v2.png

CSS Nite実行委員会

CPI x CSS Nite「After Dark」(6)『わかりやすい文章の10大原則の、+5原則』が終了しました

11 years 11ヶ月 ago

2014年1月15日、KDDIウェブコミュニケーションズ セミナールームでCPI x CSS Nite「After Dark」(6)『わかりやすい文章の10大原則の、+5原則』を開催し、40名ほどの方にご参加いただきました。

P1370792.jpg

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

bizYouチャンネル

bizYouチャンネル(登録無料)でビデオが配信されています。

CSS Nite実行委員会

2月19日にIllustratorとSVGをテーマにCPI x CSS Nite「After Dark」を開催

11 years 11ヶ月 ago

CPI x CSS Nite「After Dark」(7)『Webで使うIllustrator、そして明日から使うSVG』(2014年2月19日開催)

2014年2月19日、KDDIウェブコミュニケーションズ セミナールーム(麹町)にてCPI x CSS Nite「After Dark」(7)を開催します。

今回は『Webで使うIllustrator、そして明日から使うSVG』と題して、次のような構成でお送りします。

Webで使うIllustrator(鷹野パート)

  • Fireworksの後継としてIllustratorが有力なワケ
  • ビットマップを扱うこともあるので、 Illustratorを使う上でおさえておきたいお作法
  • 使いこなしたい「アートボード」

SVGを使う上でぶつかる壁、ありがちな疑問(鷹野+松田)

  • background-imageにも対応できる?
  • Dreamweaverでプレビューできる?
  • サイズをしていないといけないと思うんだけど、ピクセル指定したときretinaだとどうなるの?
  • マウスオーバーに対応できる?不透明度下げるとか
  • CSS Spriteに対応できる?
  • 書き出したら、PNGの倍くらいのファイルサイズになってしまった...
  • フォールバックはどうしたらいいの?

SVGマニアック(松田パート)

  • SVGを効果的に使っているサイト
  • インラインSVGと外部参照の違い
  • SMILアニメーション、DOMアニメーション、CSSアニメーション
  • SVGを使う際に便利なライブラリ等
CSS Nite実行委員会

CSS Nite LP 29「SEO 2013」フォローアップ(10)辻 正浩さん

12 years ago

2013年9月21日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 29「SEO 2013」のフォローアップとして、辻 正浩さん(so.la)の『SEOを成功させる一覧ページの作り方』セッションのスライドなどをシェアします。

下記のフォローアップメッセージは、本セミナー開催直後に、参加者向けにご用意いただいたものを転載しています。

最終セッションを担当いたしました辻です。可能な限り多くのことをお伝えしようと詰め込んでしまい分かりづらかった方もいらしたかもしれませんが、申し訳ありませんでした。アンケートを拝見した限り、お話したかったことは多くの方に伝わったと思いますので安心しておりました。

セッションの中で申しました通り、SEOはマーケティング、コンテンツ、技術の3つの揃った施策を行う必要があります。今回の私のセッションでは技術要件、その中でも重要な一覧ページのSEOについてお話致しましたが、21日には他のセッションも含めて3つそれぞれの話がありましたし、どれもSEOを考える上で重要な話が多かったと思います。また、昨年行われたSEOのCSS Nite(LP24)のスライド、音声も役立つものと思います。私は今回のセッションの中で少し触れましたnanapiのSEOの詳細についてお話しておりますし、私もSEOを学ばせて頂いたアイレップの渡辺隆広さんの話も非常に勉強になります。

私が仕事でSEOに関わらせて頂いているWebサイトの成果の量を考えますと、それはそのまま施行の量に比例しています。SEOの成果を上げるために一番重要なことは実際に施行することです。ぜひともSEOにチャレンジしてみてください。

さて、アンケートでお寄せいただいたご質問、ご意見に回答いたします。

◎一覧画面を変更する際、エンジニアから不可能という回答が来る。どうするべきか?
◎件数を増やすことと表示スピードのトレードオフをどう解決するべきか?
一覧画面はシステムで生成されますので、やはりシステム上の限界で実装できないという声が上がるケースはよくあります。
解決方法としてはまずはある程度のシステム・サーバの知識を持てば解決できることです。システムの知識を持っていれば、SEOの施策を考える段階で現実的ではない要件は除外できるでしょうし、SEOで期待できる効果と工数を踏まえて考えることができます。
専門のエンジニアに匹敵する知識を得ることは難しいでしょう。しかし不可能な場合どうして不可能なのかをしっかりと聞き出して理解することはできるはずですし、そのような理解できる程度の知識は持つべきです。多くの人は、技術者から不可能と言われただけで諦める場合が多いですが、どうしてダメなのかを知ることができれば、そのダメな理由を踏まえた別の施策を考えることができます。
例えば、表示件数の件を施行する場合に問題を理解することで、1ページ目はそのままで2ページ目以後の表示件数を増やす形にすることで実装できた例もあります。それでもSEO上の効果はほぼおなじです。
Webサイトの構築を知らずにSEOが出来るわけがない、という話がIMJさんのセッションにも有りましたが私も心から同意します。SEOを行う上では幅広い知識が必要と思いますので、私も必死にSEO以外も勉強を続けています。(なお、自分の専門外の分野を一気に勉強できる機会としてCSS Niteは非常に有益と思います。私も可能な限り一般参加者として参加しています。今回ご参加頂いた方の中に、CSS Niteに初参加の方が多いと思いますので、ぜひ他の回にも目を向けて行かれることをおすすめします。)
なお、今回お話した要件の中で、技術上本当に難しいことは含まれていないと考えています。一覧ページのコンテンツ化は月額数百円のEC用ASPでも実現できました。表示件数も、通常のWebサイトで表示件数を倍にする程度で問題視されるほど負荷が高くなるのは、元々DB設計、DBからの呼び出しの設計に問題があることでしょう。
◎内部リンクは相対パスが良い?絶対パスが良い?
SEO観点ではどちらでもかまいません。
ただし、HTMLソースを盗用された時のことを考えると絶対パスにしておいた方が安全でしょう。またcanonicalの指定などとても重要かつ誤っても気づきづらい部分は絶対パスにするのをルール化しておくことをおすすめします。
◎求人サイトやECでよくある、別サイトで同じ情報を出す際の重複コンテンツについて
これには、一時しのぎの方法と、抜本的な方法があります。
一時しのぎとしては、テクニカルな対応で充分に対応できます。一覧ページであれば、表示する際のソートを変えることや意識的にtitle要素を変える、さらには今回申しました一覧ページのユニークテキストを変える、などで充分に対応は可能です。
抜本的な方法としては、同じ情報を出す複数のWebサイトでは、片方の検索流入を諦めるということになるでしょう。一時しのぎは、検索エンジンの進化に伴いどんどん難しくなります。もともと同じ情報を出さないようにすることしか抜本的な解決はありません。
一時しのぎはセッションの中で申しました「修羅の道」です。一時うまく行きましてもダメになる可能性は高いでしょう。もし一時だけうまく行けばいいWebサイトなのでしたら取り組むべきでしょうが、そうでない場合で苦しむ覚悟ができないのであれば同じ情報を複数の場所で公開しないようにすることをおすすめします。
◎やせたけれども体調は大丈夫か
この半年でダイエットしました。健康的な食生活と運動で痩せましたので、以前よりも元気に生活していますのでご安心ください!
◎ズボンの裾が短いのでは?
き、気をつけます!

では、どうもありがとうございました!

CSS Nite実行委員会

CSS Nite LP 29「SEO 2013」フォローアップを公開します

12 years ago

CSS Nite LP, Disk 29「SEO 2013」

2013年9月21日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 29「SEO 2013」のフォローアップを公開します。

終了エントリーはこちらです。

たくさんのブログで取り上げていただきました。

CSS Nite実行委員会

CSS Nite LP 29「SEO 2013」フォローアップ(9)安川 洋さん

12 years ago

2013年9月21日、ベルサール神田 イベントホール(2F)で開催したCSS Nite LP, Disk 29「SEO 2013」のフォローアップとして、安川 洋さん(アユダンテ)の『事例で学ぶキーワードとカテゴリ』セッションのスライドなどをシェアします。

下記のフォローアップメッセージは、本セミナー開催直後に、参加者向けにご用意いただいたものを転載しています。

「ECサイトを念頭においたカテゴリとキーワードのセッションを担当させていただきました。

ECにおいてカテゴリはランディングページの集合体、サイト全体のLPOみたいなもので、その重要性は語りつくすことができません。単に商品の分類ととらえることなく、コンビニの棚割りを考えるように、ユーザー目線で設計ができるようになることを願っております。

もしよろしければ、アユダンテ株式会社のTwitterのフォロー、FBページのいいねをお願いします。主にSEO、Google Analytics、ソーシャル関連の情報をお届けします。

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

人気記事トップ10

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

企画広告も役立つ情報バッチリ! Sponsored