参加セミナー・イベント

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

最近の記事

投稿を公開したときに指定したページにアクセスする

この記事では「管理画面で投稿やカスタム投稿の公開ステータスを更新したときに何かしらの処理をする」方法の備忘録です。 functions.php を修正し・・・

WordPress

ローカルフォントをWebフォント指定する

Google Fonts はとても便利だが、適用するまでの遅延が気になったので、同様の効果をローカルにあるフォントを利用して実現させる。 事前に用意する・・・

CSS

[ソフト] Web font用のwoff、woff2にフォントを変換する無料サービス

WOFFコンバータ ダウンロードhttps://opentype.jp/woffconv.htm 以下、リンク先の「概要」を抜粋。 フォント・・・

CSS

JSON

JSON.parse() 配列とオブジェクトのリテラル記法を組み合わせた文字列をデータとして取り扱えるようにする。 // JSONデータ let ・・・

JavaScript

いろいろな判定

真の場合。偽の場合は、!== を使う。 プリミティブ値の判定 文字列の判定 if (typeof a === 'string') {} ・・・

JavaScript

Custom Post Type UI で 投稿画面にタクソノミー が表示されなくなった場合 → REST API

数ヶ月前、WordPress本体をバージョンアップして、エディタがガラリと変わった。その際、それまでサイドナビに、Custom Post Type UI(CP・・・

WordPress

なるほどデザイン

書籍「なるほどデザイン」を読んだときにメモしたノートが出てきた。3, 4年前に読んだ本。テキストのみで備忘録として残しておくが実際はイラストと合わせ・・・

デザイン

グーグルの考えるデザインガイドライン

使えるデザインになっている?→ デザインは正しいインプットによって、人の暮らしや夢を助けるツールサクサクと動く、機能するデザインになっている?→ デザインが機・・・

デザイン

売れるデザイン

書籍「売れるデザインのしくみ」を読んだときにメモしたノートが出てきた。3, 4年前に読んだ本。2009年に出版されたと知って驚き。10年前と言えば、・・・

マーケティング・ブランディング

スタバに学ぶ。

書籍「スターバックスはなぜ値下げもテレビCMもしないのに強いブランドでいられるのか?」を読んだときにメモしたノートが出てきた。3, 4年前に読んだ本。20・・・

マーケティング・ブランディング

人気の記事

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

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

JavaScript

iframeの高さを自動調整する

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

JavaScript

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

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

WordPress

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

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

MAMP

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

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

Illustorator

背景画像の拡大・縮小 → background-size !

W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加され・・・

CSS

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

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

WordPress

Advanced Custom Fields を使った条件分岐(セレクトボックス、チェックボックス、ラジオボタン、真偽)のテンプレート記述方法

前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・

WordPress

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

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

WordPress

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

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

JavaScript

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