参加セミナー・イベント

Webデザイン行く年来る年(Shift6)

講演者
(敬称略)
基調講演:長谷川 恭久
マークアップ:益子 貴寛、小山田 晃浩
アクセシビリティ:植木 真、中根雅文、山本 和泉
ツール、電子書籍:鷹野 雅弘
デザイントレンド:原 一浩、矢野 りん、坂本 邦夫
スマートフォン:たにぐち まこと、矢野 りん、松田 直樹
ソーシャルメディア:井出 一誠、大月 茂樹
スペシャル(Windows 8):春日井 良隆
スペシャル(CodeGrid)中村 享介、外村 奈津子、山田 順久
開催日
2012年12月15日
場所
ベルサール神田

基調講演:未来をプロトタイプしよう

「なぜ作るか?なぜ使うか?」

これに解答できないのであれば作る価値なし(とまでは言ってなかったけど)。
(感想:激しく共感)

全体のプロセスから見直す

ガントチャートなどスケジュール・タスク管理をしているかもしれない。
でも、マークアップデザインに関しては「デザイン/ビジュアル」と一括りになってはいないか?

それは成果物だけが評価の対象であるため。
たとえば食事でたとえれば、できあがった料理が評価の対象となるため。
その料理がどんな材料で、どこの産地で、誰の手で、を知ることで、料理のクオリティーを高めることができる。

(感想:確かに。ただ、安く・早い・(そこそこ)うまいが求められてしまうと水の泡。デザイナーとしてはクオリティをあげたいのだが、クライアントは安さを重視しがち。この辺をどう説得できるかが必要になっていきそう)

成果物の評価を求める=結果を求めてしまう。
「モック見せて」のワケであり、「デザイン/ビジュアル」と一括りしたクライアント手動のワナである。
ここをひっくり返すトリガーが必要。
それがプロトタイピング。

プロトタイピング

様々な環境(利用環境が大幅に異なる、新しい分野、スクリーンが小さい、指を使ったインタラクションなど)があるが、「プロトタイピング」を実施し、プロトタイプした内容を見て・触れることができるようにし、デザイン/ビジュアルプロセス全体をみることができるようにする。

プロセスの理解

カンプなしだとクライアントはほんとに理解してくれないのか?
共創と改善で「正しい」を共有して繰り返すことでプロセスを理解できないものか?
(感想:共有したはずなのに「正しい」が知らぬ間に変化してしまうこともしばしば・・・)

未来は不透明であり失敗は大前提。これは前提条件。

マークアップ:2013年に向けて押さえておきたいマークアップ・トレンド20

講演内容の大半はすでに導入済みだったので、まだ対応していないところや新たに得た情報を備忘録としてピックアップ。

技術
Web Socket
プリプロセッサー

CSS
sass.(サイトの女性のイラスト、彼女の名はサッシーガール)、less、stylus
javascript
coffeescript、typescript、livescript
ビルド

GUI
codekit、livereload、compass.app、scout
CUI(character/command user interface)
grunt、yeonan、brunch
GUIより進化が早い
情報
多くのファッションブランドがHTML5+CSS3を導入(感想:そうそう。つい最近までは業界イメージと裏腹に残念なサイトばかりで、できることならリニューアルさせていただきたいと思ってたほどなのにがっつり変化。・・・)
2014年、HTML5勧告予定だが、まだ勧告から外れる可能性のあるタグもあるので要チェック。HTML5.0AtRiskFeatures
(感想:やばい。最近menuタグを頻繁に使うようにしてた・・)
これからはIE6,IE7切りがはじまる(有名サイトが古いIEを切り捨て)。
IEの中でIE6のシェア 世界4.7% 日本0.4%(感想:自分が見れるアナリティクスではもっとシェアがあるからこの数字にはびっくり!x10では?と疑うほど)
IE10→自動アップグレード
IE8からとモダンブラウザが今後の主流ターゲットブラウザだろう。
すでにHTML.next CSS4(現状、selectorのみ。時間軸、UI状況、グリッド構造など)の草案が始まっている。HTML5.1は2016年の勧告を目指して動いている。
画像はモダンブラウザであればSVG対応
*Android3以降で対応(感想:積極的にsvg対応していこっかな)

スペシャル:CodeGrid総集編2012「2012年の必読記事&2013年の注目記事」

フロントエンドに関わる人々のガイドを月額840円(4回配信)で購読可能、とのこと。
CodeGrid

先取り、Shadow DOM

  • まだ実験として部分的にChromeに実装
  • 雑誌の特集などではまずやらない
  • 今、主流の技術も始めはこんな感じ
Shadow DOMとは?
DOMをカプセル化する。
カプセル化とは?
内部へのアクセスはさせない。内部の構造も隠されている。だけどある。ブラウザ上で表示される。
見た目や動きはつけられないの?
コンポーネント制作者が用意したインターフェイスで制御。
何が良いの?
CSS,、JS同士の衝突を防ぐ
なぜ中身を隠すの?
複雑なHTML構造をすべて把握するのではなく必要のあるDOMをピックアップする。
コンポーネントが担う機能、責任範囲の明確化。
想定外の操作を防ぐテストだって書きやすくなるはず。

Web Components と Polyfill で体験できる。
ECMAScript6(Harmony)/ WebGL /CSS Custom Filters

ピクセルグリッドの仕事術

javascriptの「金額」「工数」見積もり方

見積もりは作る人も必要なもの。

見積もりの問題

  • 成果物ベースの見積もり(ページいくら、トップページいくら)は無理(javascriptと言っても小さなスクリプトからWebアプリケーションまで多岐であり、仕様変更や予想外のバグが発生するため)。
  • 原価ベースの見積もり(人日)はできるが問題あり(生産性が低い方が儲かる。)。

そこで仮想的な単位で見積もる(アジャイル開発の見積もり手法)。

単位はなんでもOK。まずは基準となる単位を決める。
たとえば、単位をポイントとし、モーダルダイアログの実装を1ポイントとしたら、カレンダーは3ポイントというように、相対的に見積もる(人間は相対的に見積もるのが得意らしい)。
この手法のメリットは、実装スキルの差による価格差はなく、効率よく仕事すると稼げる。そして原価ベースの問題を解決できる。

というわけで、ポイントから「金額」「工数」を算出できる。
金額 = ポイント x 単価
工数 = ポイント x 制作時間

(感想:これは個人ベース(対チーム)、チームベース(対プロジェクト)、プロジェクトベース(対クライアント)、と見積もりを細分化したらいいかも!と思った。)
(感想:確かにjavascriptに限らず、他にもほかでも応用できそうです。)

jQuery Conference2012レポート

  • エンジニアの視点からレポート
  • jQueryコミュニティの関心ごとがわかる

-具体的な内容は購読する必要があるので、割愛-

アクセシビリティ

数年前に植木さんの講演を聞いて依頼、アクセシビリティ=植木さんとなっている。アクセシビリティという響きでちょっと構えてしまいそうなのを、ものすごく優しく砕いてくれて、ものすごく分かりやすい。そして興味を持続できるように講演内容を工夫してくれていて、デザイントレンドと並んでずっと続いてほしい講演。

今回はPodcastの公開録音という形式。さらには全盲の視覚障碍者の方の生の声が聞けて有意義でした。

今回のセミナーでの響きワードは2つ。

  • アクセシビリティは「あたりまえ」のことになってほしい。
  • 伝えたい意思は正しい手段で伝える。

アクセシビリティ体操がYouTubeにアップされるのを楽しみにしています。

ツールと制作環境、電子書籍2012-2013

Adobe CS6のチップス。cloud使ってるのに全然活用できてないことを痛感・・・。
もっと積極的に使い倒すくらいの勢いをつけないとやばい、と危機感さえ感じた。

電子書籍の拡張子は「.mobi(amazon/kindle)」「.epub(iBooks)」があるが、.epubを展開すると「html + css」で制作されているのが分かる。

ウェブサイトも電子雑誌も、多種多様な利用者(読者)のニーズにどうやってこたていくのか、真剣に考えてく時代。
(感想:激しく同感!!もはやサービス全般に言える、と同時にその逆も然り。)

ソーシャルメディア:2012年のトピック振り返りと、2013年に向けた活用の押さえどこ

2012年振り返り: ソーシャル疲れ

自社メディアのソーシャル化やその他のソーシャルメディア対応で、キャッチアップの増加によるソーシャル疲れ。

  • mixiやfacebook プロモートポストのように頻繁な仕様追加・変更・・・
  • interest 女性をターゲットにしたが・・・
  • LINE 急成長 台湾では二人に一人 / 首相官邸も導入

2013年予測: Facdbookの波はマジョリティー、自治体へも

2013年予測大企業のほとんどは、既にFacebookページをもち、何かしら取り組んでいる。
これから取り組みは、Facdbookの波はレイトマジョリティー(中小企業や地方など)に広がり続け、ついには自治体へも

活用ポイント

数字作りはほんとにいいものか?本当の目的は?話題作りだけでなく、それがマーケティング全体にどう貢献しているか?をしっかり考える必要が出てきている。

企業より個人 社員・個人が牽引して成功しているケースが多い。

注目サービスは、LINEのline@、twitterのcards、pinterestと楽天、google+を使ったSERPs(Search Engine Results Page:検索エンジン検索結果)

スマートフォン:スマホ・タブレット・ミニタブ時代の Webサイト制作術

2012年を一言で →「脱ビットマップ」「device-pixel-ratio」「速」。

2012年特徴

  • ジェスチャーを前提としたデザイン
  • ナビやバナーが大きい
  • 文字以外のエリア全体をクリッカブル

モバイルファーストならぬタッチデバイスファースト

スペシャル:WebのスキルをWindows 8で活かそう

  • 常時接続
  • ファイルからソーシャルへ
  • クラウドストレージ
  • デスクトップからノートへ
  • マウスキーボードからタッチへ

画面はタッチするものが当たり前。タッチできないと故障扱いになるのも時間の問題。

windowsストア(感想:気になる。作品公開の敷居がさらに下がったとのこと)。

デザイントレンド:Webデザイントレンド年末スペシャル!!今年のWebサイトの表現を多角的に振り返る60min.

トレンドとは最先端ではない。時代に最適化されつつある現象である。

メッセージ性から実用性へ
メッセージのあるイメージよりユーザーの利便性を優先
同じイメージでも情報のあるイメージ
無駄なテクスチャを省く
レイアウトの試行錯誤
演出まわりの表現
8
ベベルとフラット
進化したイアイ → ざく切り → 指向性の切り込み → フキだしとの融合
円と円窓
ブランドカラー、ツートンで統一
お店のイメージを活かしたデザイン(ファミリーマート、松屋)
ロゴの色とナビをあわせる
リボンのバリエーションまとめ、視点調整
高さを意識したデザイン(雑誌のような)
機能まわりの表現
タイムライン
twitter以降のサイドナビ
スライド
微調整

「アクセシビリティなインフォグラフィック」(感想:このフレーズ、深い!)

2013年予測

  • ユースケースによっては、メッセージ性から実用性ではなく、逆に字離れ!重視
  • 意味のない表現はもう無理
  • プライオリティとかがっちりデザインに反映
  • 視線の誘導が矢印だけでなく、もっと多彩デザイン
  • 単色

レスポンシブWebデザイン

2012年のWeb業界バズワード「レスポンシブWebデザイン」略してRWD(Responsive Web Design)。業種業界問わず流行った。その背景には大きく2つの理由があると推測。

  1. googleの検索結果に影響することを公式に発表(2012.6.12)。
  2. media queryが勧告になった。
デバイスごとのHTML vs. RWD
二者択一ではなく、合わせ技も可能
Windows 8 と RWD
最大公約数的なデザインの必要性と、そのためのRWDという位置づけになりそう

最近の記事

インタラクションデザイン

5年くらい前に購入した書籍「インタラクションデザイン」。この書籍内ではたくさんの事例が紹介されている。残念ながらその多くは現在閲覧することができなくなっていた・・・

デザイン

Advanced Custom Fields 名前を変更して、データも反映させる

WordPressを自作する上でもはや欠かせないプラグインの一つが、「Advanced Custom Fields」。 名前を変更しようと思って、Wor・・・

WordPress

配列の重複を削除する

配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・

JavaScript

MAMP を 5.7 から 6.2 にアップデートした

5年以上前と比べると、アップデートが簡単で驚く。とくに記事にするまでもないと思いつつ、一応備忘録。 インストールすると、既存のディレクトリはそのままに別・・・

MAMP

Briefly unavailable for scheduled maintenance. Check back in a minute. → . maintenance を削除

プラグインを更新中に、誤って、違うページにアクセスしまいました。すると、管理画面だけでなく、公開中のすべての画面が「briefly unavailable f・・・

WordPress

GulpでERRが出てテンパった → gyp: No Xcode or CLT version detected! → PostCSS plugin autoprefixer requires PostCSS 8

Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりG・・・

制作効率化

ビジネス前提ワークシート

書籍「LEAN UX リーン思考によるユーザエクスペリエンス・デザイン」から抜粋。 「前提の宣言」「MVPの作成」「実験の実行」「フィードバックとリサー・・・

知識編

リーン思考のUXデザイン

LEAN UX は、コラボレーションと部門/領域横断的な手法によって、製品の本質を素早く明らかにするための実践的手法であり、これによって文書への過度な依存を減・・・

知識編

ES6(ES2015)の主な変更点

オブジェクト指向 クラス定義 JavaScriptは厳密にはクラスがない、プロトタイプベースのオブジェクト指向言語。ES6でclass構文が導入さ・・・

JavaScript

JavaScriptスタイルガイド

書籍「メンテナブルJavaScript」と Google JavaScript Style Guide 和訳 を参考に自分なりのJavaScriptスタイルガ・・・

JavaScript

人気の記事

WP_Queryを使って絞り込み検索するのにコレは便利!

めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・

WordPress

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript

http://localhost:8888/ → http://localhost/

http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・

MAMP

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・

JavaScript

アーカイブページでカスタムフィールドやタクソノミーで絞り込みした状態でリスト表示する

<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・

WordPress

イラストレーターでレイヤーごとにPNGで書き出す

【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・

Illustorator

WordPressのカテゴリー一覧ページでカテゴリー名とスラッグを取得する → get_queried_object()

やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・

WordPress

カウントアップ、カウントダウンするJavaScript

ポイントを使ったり、増やしたりしたときに、結果のポイント数に差し替えるのではなくて、カウントアップしたり、カウントダウンして動的に動かそうと思って作ってみた。・・・

JavaScript

MAMPの日時(タイムゾーン)を変更する

MAMPを使用していて、日時の情報を制御しようとしたとき、取得している日時が日本時間ではないことに気がついた。 時差を計算してPHPでプログラミングしていたが、・・・

MAMP

管理画面のカスタム投稿一覧で並び順を変更する

WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・

WordPress

思考と学び参加セミナー・イベントWebデザイン行く年来る年(Shift6) | シンプルシンプルデザイン