ieに対しては、プログレッシブエンハウスメント
ieではリッチな表現ではなくusefullに重きを置く → プログレッシブエンハウスメント
瞬間的な切り替え(transition無し)
静止画(canvasアニメーション無し)
背景透過せずに黒背景
拡散するときのURLは個別のURLではなく共通のURLに(pushstateが使用できない)
開発後チェック
ソースの整理
各イベントごとに処理をまとめるなど
開発時に使った必要ないファイル、コード、console等を削除
ブラウザ・デバイスチェック
見た目はカンプ通りか
動きにおかしいところはないか
モンキーテスト
ウィンドウサイズ変更チェック→ゆっくりサイズを変更してもしっかり動くか
意地悪な使い方をする
ボタンを連打する
スクロールをぎゅいんっと動かす
機能は仕様を満たしているか
他にすることはあるっけ？
ie6-8で、html5とcss3を使えるようにするjsライブラリ
▼css3セレクタを使えるようにする
・selectivizr.js
・ie9.js
|
1 2 3 4 |
<script type="text/javascript" src="common/js/jquery.js"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="common/js/selectivizr.js"></script> <![endif]--> |
使えるようになるセレクタ
[foo^=”bar”],[foo$=”bar”],[foo*=”bar”],:root,:nth-child(n),:nth-last-child(n),:nth-of-type(n),:nth-last-of-type(n),:last-child,:first-of-type,:last-of-type,:only-child,:only-of-type,:empty,:target,:enabled,:disabled,:checked,:not(s)
注意点(selectivizr.js)
CSSは外部ファイルに記述しないと動かない
ローカルでは動かない
▼css3プロパティを使えるようにする
・PIE.htc
・PIE.js
使えるようになるプロパティ
・border-radius
・box-shadow
・border-image
・multiple background images
・linear-gradient as background image
cf:http://www.hp-stylelink.com/news/2013/09/20130918.php#list03
▼html5タグを使えるようにする
・html5shiv.js
使えるようになるタグ（機能は使えない）
article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section
注意点
head閉じタグ直前に読み込む必要あり（bodyタグ直前だと、html5要素が存在しないので、css,jsが効かない）
恵比寿ランチ：舞香
早い、安い、美味い、多い、と四拍子揃ってる。
スタミナ定食は、レバー入っているので、苦手な人は気をつけて下さい。
おすすめは肉辛味噌定食、800円なり。
http://tabelog.com/tokyo/A1303/A130302/13060639/
写真はつけ麺。
先生がたくさんいるチームと、先生
コンピューターを使った広告を作っているところ
広告：メディアにのっけて、ユーザーの心を打つもの
▼個人
いろいろ
ハードウェア制御
真鍋大度
Memo
web
Grannt skinner
Seb Lee-Delisle
中村勇吾
深津さん
奥田さん
清田さん
▼企業
サウンド
Qosmo
いろいろ
ライゾマ
リアル（インスタレーション、サイネージ）
チームラボ
web中心
lig,メフィラス、シフトブレイン、ホムンクルス、ドットバイドット、エイド、
キリフダ、guild、tha,メフィラス、mount,バスキュール、カタマリ、イメージソース,カイブツ,バードマン
企画エージェンシー
猿人
party
AKQA
W+K Tokyo
シックス
博報堂ケトル
TBWA
各個人に関しては、正確に何をやっているか分からないので、
分類に違和感を持つ人もいるかもしれない。
最初の案件反省
・作業時間の見積もり謝り
・ディレクターへの説明不足
・レビューのときは、文言チェックのみレベルまで仕上げる
・締め切り順にやる
・順位に疑問があるときは、ぶつけてみる
・ヘルプアラートをすぐに出す
web制作ワークフロー
▼大枠の流れ
企画
デザイン
実装
納品
運用
▼具体的にすること
▷企画・構成
ユーザーが楽しめる内容・見た目・動き、役立つ機能のアイデア出し
出たアイデアを言語化して、提案書や、ワイヤーにする。
▷デザイン
各オブジェクトの各属性の値を、案件に合わせてバランスよく変化させる
デザイナーさんが、1〜数日かけて、psdファイル,画像等を作る。
▷実装
スケジュールもらう
psdもらう
素材をもらう
コーディング・実装（60%の質で）
見た目
動き
機能
ブラッシュアップ
検証
モンキーテスト
機能検証
環境チェック
OS・ブラウザ・デバイス
ローカル
リモート
w3cチェック
リファクタリング（ソース綺麗に）
社内チェック
クライアントチェック
▷納品
納品形式に整える
メールで送る等
▷運用
集客
サイト改善
▼考え
▷全体
作業的な部分（実装と納品）は、高速で終わらせる。
企画・構成、デザイン、実装の途中の段階で、クリエイティブの質の向上のために、
内容、見た目、動きのアイデア出し、ブラッシュアップすることに、脳みそを使う。
一度決めたことを、変更することを面倒臭がらない。
▷企画
日々のインプットの量と質、その整理の仕方が大事。
整理の仕方は、セオリーみたいなものがあるので、本を読んで、
やり方を定着させておく。
下のとか。
 |
|
 |
▷デザイン
意見を言えるほど、頭の中が整理されていない。
▷実装
時間の見積もりをするために、作成（修正）ページ数・箇所、使用データ（文字、画像、動画等）、見た目、動き、機能等を把握する。
仕様書等は、上記がパッと見分かるようなものがいい。
実装よりも、検証・環境チェックの方に時間がかかるので、そっちのほうに、時間をとっておく。
検証フロー（自分の改善点）
実際にユーザーになった体でサイトを使ってみる
ディレクター、リーダーには全てのデバイスの環境チェックが終わった段階で渡す
ソーシャル機能が動いているかどうか確かめた上で渡す
ディレクターが先方に喋りやすいように、実装でしたことと、その目的を説明する
サイト全体のリンクチェック
飛べるか
リンク先が正しいか
▷納品
ファイル漏れがないか、2度確認。
▷運用
意見を言えるほど、頭の中が整理されていない。
情報収集先（webデザイン、コーディング、その他）
▼blog
▷web（デザイン・コーディング）
コリス | サイト制作に関する最新の情報をご紹介 http://coliss.com/
Webクリエイターボックス | WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。 http://www.webcreatorbox.com/
- Photoshop VIP http://photoshopvip.net/
YoheiM .NET – 世の中のWeb情報に、体験と意見を添えて発信します http://www.yoheim.net/
バシャログ。 – 株式会社シーブレインのWeb制作ブログ http://c-brains.jp/blog/wsg/
アシアルブログ http://asial.co.jp/
アジャイル・HTML5・マルチデバイス開発に強いクレイ http://kray.jp/
▷フロントエンド（flash,ビジュアル表現)
beinteractive! http://beinteractive.jp/
_level0 – KAYAC Front Engineer Blog http://level0.kayac.com/
soohei.net http://soohei.net/
fladdict http://fladdict.net/blog/
ヨモツネット http://yomotsu.net/
yoppa org | 田所淳のWebページ。大学の講義などの資料を掲載しています。openFrameworks、Processing、Arduino、Pure Data、Max/MSP、HTML5の情報など。 http://yoppa.org/
trick7 http://trick7.com/
CreativeJS | The very best of creative JavaScript and HTML5 http://creativejs.com/
▷製作会社
THE GUILD http://theguild.jp/
BIRDMAN BLOG http://www.birdman.ne.jp/blog/
Stronghold http://zxcvbnmnbvcxz.com/
DevJam http://devjam.net/
株式会社LIG | 台東区上野にあるウェブ制作会社 http://liginc.co.jp/
▼web（blog以外）
qiita,stackoverflow
CodePen
FWA
awwward
vimeo
codedrops
▼メルマガ
高城未来研究所「Future Report」
藤沢数希 週刊金融日記
中島聡 Life is Beautiful
やまもといちろう 人間迷路
湯川鶴章メルマガ ITの次に見える未来
code grid
▼本・雑誌（奥田さんのブログで紹介されていたもの）
web desinning
業界でいけてる人がブログで紹介してる本
▼リアル
自然、人、人工物などからヒント
OGPのメリットと、最適文字数
▷メリット
▼ogp設定されていない場合
自分のウォールにのみ、下記文言で投稿。
「〇〇さんがリンクについていいね！と言ってます」
ニュースフィードには反映されない
→ 広まらない
▼ogp設定されている場合
自分のウォールに加えて、友達のニュースフィードにも表示。
投稿フォーマットは、上記、「〇〇さんがリンクについていいね！と言ってます」のようなテキストだけでなく、
URL、タイトル、ディスクリプション、サムネイル画像が表示され、リッチに
http://liginc.co.jp/designer/archives/5592
▷文字制限
・title：20字以内
・description：50字以内
・image：
幅398ピクセル かつ 高208ピクセル以上が良い
アスペクト比は1.91：1が良い
文字数 : http://squeeze.jp/blog/web-marketing/best-title-and-description-length/
img : http://www.coprosystem.co.jp/tipsblog/2013/09/20.html