参加セミナー・イベント

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という位置づけになりそう

最近の記事

文章のユーザビリティ

この書籍の中で、ライティングのユーザビリティについて触れている項目があり、激しく共感する部分だったので、ここで備忘録としてピックアップする。 ・・・

ライティング

インタフェースデザイン

この書籍は、I部 リサーチ、II部 デザイン、III部 インプリメンテーションと三部構成になっている。この記事では、その中から、I部 リサーチ、・・・

デザイン思考

フルHD映像を4Kにする → スーパースケール

これを知ったときはマジか!と飛び跳ねた。あらためて思い返してみると、確かに公式チュートリアルでも触れていたことをうっすら思い出す。そしてそのときとやり方がなん・・・

DaVinci Resolve

Macで編集時と書き出し後で色味が変わってしまう場合に試してみたいこと

試したことはまだないけど、Macで編集時と書き出し後で色味が変わって困ったときのために備忘録。 プロジェクト設定 > 「カラーマネジメント・・・

DaVinci Resolve

プロジェクト設定と環境設定

プロジェクト設定と環境設定について詳しく解説されている情報がなかなか見つからないので、要所要所で知り得た情報を更新していきます。 プロジェクト設定 ・・・

DaVinci Resolve

項目”Clipy”は開いているため、ゴミ箱に入れることができません。←アンインストールしようとしたときの話し

Clipyが超絶便利そうだったので、macOS Big Sur にインストール&再起動して使ってみた。ところが、command + c を複数の箇所で行い、c・・・

徒然なままに

setTimeout は requestAnimationFrame に変えるべき?

requestAnimationFrame をはじめて見たので調べていたら、setTimeout や setInterval は requestAnimati・・・

JavaScript

書籍「小さなチーム、大きな仕事」からピックアップ

6年ぶりに読み返したが、今なおハッとさせられることが多く見つかる。 この本で忘れないようにしたい項目をピックアップするだけでも役に立ちそ・・・

起業向け情報

書籍「完全網羅 起業成功マニュアル」からピックアップ

この記事では、以前に読んだ際に付箋を付けていたが、その部分だけを備忘録としてピックアップするため、本の要約ではない。実際は、何倍も濃い内容で、練・・・

起業向け情報

書籍「はじめの一歩を踏み出そう」から気になったフレーズをピックアップ

もう一回、全部読み返したいところだが、書籍がありすぎるので、当時付箋紙をつけていたところだけをピックアップ。書籍内ではより具体的な説明があるので・・・

起業向け情報

人気の記事

ブラウザ表示領域の上部(ヘッダー)と下部(フッター)を固定する

コンテンツの量に関わらず、スクロールしても、ヘッダーとフッターは常にブラウザ上に表示されるようにする。 ポイント htmlとbodyに高さ100%を指定する ・・・

CSS2008年12月27日

JavaScriptで補色や反転色、RGBを取得する

#と6桁(もしくは3桁)の英数字(正確には16進数で表記される0から9、aからfの英数字)からなるカラーを、RGBでの数値に変換、もしくはRGBから16進数に変・・・

JavaScript2014年11月21日

項目”Clipy”は開いているため、ゴミ箱に入れることができません。←アンインストールしようとしたときの話し

Clipyが超絶便利そうだったので、macOS Big Sur にインストール&再起動して使ってみた。ところが、command + c を複数の箇所で行い、c・・・

徒然なままに2021年9月13日

変数のスコープ(領域)

グローバル変数 スクリプトのどこからでも参照できる ローカル変数 ファンクションの中で宣言されたローカル変数はその中にしかない function squa・・・

JavaScript2007年11月9日

コンテンツの量によってフッターの位置を変える

具体的には、ブラウザ表示領域(ファーストビュー)とコンテンツ高さを比較して、コンテンツ高さの方が短い場合、フッターは下部に固定。コンテンツ高さの方が長い場合、ス・・・

CSS2007年11月4日

記事のコメントの投稿と表示をテンプレートに直接書いてみる

記事のコメント部分を最低限必要な情報のみ直書きしてみます(WordPress 4.9.2 で実施)。 前提 誰でもコメントできる(管理画面の「設定」→・・・

WordPress2018年2月4日

ファイル名を拡張子なしで取得するサンプル

変数bnにphpファイルのファイル名を拡張子なしで取得するサンプル $bn = basename($_SERVER['PHP_SELF'], ".php");・・・

php2011年10月27日

特定の文字で複数にセルを分割する

たとえば、セルに「テスト左:テスト右」と書かれているのを「テスト左」「テスト右」とセルを分割する方法です。Javascriptでいうところのsplitです。 そ・・・

Excel2009年6月17日

WordPressでAMP対応して、Googleアナリティクスを設定する → プラグイン「AMP」

【2020年4月11日更新】 プラグイン名が「AMP for WordPress」から「AMP」に変更され、作成者も「AMP Project Contribu・・・

WordPress2018年8月13日

Amazonの新しいサービス「Amazonフレッシュ」 を使ってみた

「Amazonフレッシュ」をご存知でしょうか? Amazonフレッシュについて、サービスの紹介ページから以下抜粋します。 --- 今日の食卓、まとめてお届け A・・・

サービスレビュー2017年8月2日

コメントありの記事

インタフェースデザイン

「test」

デザイン思考

Instagram API を使ってインスタに投稿した画像データを取得する

「>ころころさん コメントありがとうございます! 確かに、APIドキュメント見ましたが、ライブに関する情報は今のところ取得できないようですね。 インスタライ・・・」

API

Sony Eマウント フルサイズ対応のカメラレンズを収集するページを作ってみた

「SIGMAから超軽量で明るい単焦点レンズが2本発売になりましたので、リストにレンズ情報追加しました!」

お仕事・制作日記

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

「>名無しさん ご指摘、ありがとうございます! 記事冒頭の「まずはサンプル」のサンプルが動いていませんでしたので修正しました。」

JavaScript

えっ!?Yahooの検索結果から遷移しようとしたら全く違うサイトにリダイレクトされてしまった...

「>前田さん コメントありがとうございます。 環境は分かりかねますが、修正したいファイルのパーミッションを604や644に変更すると書き込みできるようになります(・・・」

お仕事・制作日記

記事の投稿IDなどの投稿者(ユーザー)情報を取得する方法 → get_the_author_meta

「アバターを取得する「get_avatar」についても追記しました!」

WordPress

jQueryでformを操る【nameの値を取得する/クリアする】

「「値をクリアする」を追加しました。チェックボックスやラジオボタンの値を何も選択していない状態に戻すときについて触れています。」

JavaScript

iframeの高さを自動調整する

「>匿名さん コメントありがとうございます。 サンプルでは、beforeは何も処理していないので期待する表示にならない、で正解です。 クリックした後が、対応・・・」

JavaScript

MAMPでMySQL Serverが突然起動しなくなった時 → ログファイル削除

「(匿名)さん コメントありがとうございます。何も設定変更していないのに、それまで使用できていたサーバーが突然使えなくなるのは辛いですよね、、。 ここで紹介したや・・・」

MAMP

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

「コメントありがとうございます! そもそもできるかはわかりませんが、ソースを書き換える必要はあります。 下記記事などが参考になるかもしれません。 illustra・・・」

Illustorator

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