2012 年 9 月 8 日 ( 土 ) 13:00 – 18:00、アルファあなぶきホールで行われた Webridge Meeting SP11 [ Web 制作の効率アップ術 ~イザというときに困らないために~ ] に参加しました。
今回は、ウェブ制作者が今取り組んでいる業務の効率を上げるべく、Web 制作の効率化について考えるセミナーです。
この記事の目次
各セッションの覚え書き
各セッションの内容を全部書くのは無理なので、気になった所だけ書いています。
なぜ効率化? わたしたちがやるべきこと ( 神森勉さま )
- 本当の効率化とは?
- 大事なのは成果物の品質。
- 効率化ために CMS を導入する。
- なぜ、CMS を導入する?
- お客様が更新できるように。
- HTML がわからない人でも更新できる。
- お客様に素早く情報提供できる。
- なぜ、CMS を導入する?
- HTML を「超ラク」に書きたい。
- 書籍のページをコーディングしてみる。
- いきなりコーディングを始めるのではなく、構造を把握してからマークアップすると効率が良い。
- 中吊り広告をコーディングしてみる。
- 内容を把握してから、マークアップの設計をする。
- 書籍のページをコーディングしてみる。
- 仕事は「作業」と「考えること」に分けることができる。
- 「作業」と「考えること」を一緒にしない。
- 作業時間を減らし、考える時間を増やす事が大切。
- 下準備の時間が大切。
- 効率的に調理するため。
情報収集から始まる Web 制作の効率化 ( 大月茂樹さま )
情報収集に関するセッション。三輪車で息子さんが転んだの痛そうだ。
- 考えること
- 最適なツールは?
- 下準備
- 情報収集
- ツールや制作アプローチ、トレンドなどを知る。
- 検索
- 専門誌(雑誌・書籍)
- RSS・メルマガ
- wp-d.org(WordPressのサイト)
- コメンターというサイト。
- ソーシャルメディア
- ウェブサービス
- グノシー
- Google アラート
- 知人・職場の同僚
- ツールや制作アプローチ、トレンドなどを知る。
- 思考・試行
- 特徴を理解しアウトプットを想像する。
- 自分で試してみないと長所も短所も分からない。
- 情報収集
- もう一つの効率化
- 企画・提案が通らない原因。
- クライアントのビジネスの理解。
- 企画書で使える画像・事例をピックアップしておく。
- 企画・提案が通らない原因。
- 効率化により得られるもの
- アウトプットのクオリティー
- クライアントからの信頼
- 納得できる対価
定時で退社する! Web 制作時短テクニック集 ( 筒井志信さま )
地獄のミサワw
- サイトリニューアル
- サイトマップを作る
- ローカルにサイトを準備してターミナルでファイル一覧を作る。
- ページ一覧を取得する筒井さんのプログラム
- ページタイトルを取得する筒井さんのプログラム
- アドレスリストを一気に開く筒井さんのプログラム
- jQuery をブックマークレットで読み込んで、コンソールでリンクの数を数えたり、見出しの数を数えたりする。
- ワイヤーフレーム
- ダミーテキストを生成するウェブサービス。
- ダミー画像を生成するウェブサービス。
- ブックマークレットで本番サイトとテストサイトを切り替える。
- サイトマップを作る
- フォトギャラリー
- Word 原稿と画像を貰い、エクセルでタグを生成する。
- サムネイルやリサイズをソフトで一気にやる。アールアルファ?
- PHP でプログラムを書いて生成する。
- Adobe Bridge でやると簡単。PDF 出力もできる。
- ???? ← 聞き逃した!
- 一定期間だけ新着マークを出す。PHP or SSI で自動更新する。
- URL にパラメーターを付けて、出力方法を変える。同じファイルが複数できるのを防ぐ。
- PHP でスクレイピングし、ファイルを生成する。
- 浮いた時間を勉強にあてる。
HTML5 / Sass / CoffeeScript – ツールを活用した Web サイト制作新時代 ( たにぐちまこと様 )
デモが凄かった…。
- Mac のソフトが良いらしい。
- 閲覧環境が変わってきた
- スマホ、タブレットなど多様になってテストが大変。
- Android はクセの強い端末が多いらしい。国産端末に多いらしい。
- 実機確認をどうするか?
- ヤマダ電機で確認する?
- 検証センターを利用する。
- 主要な端末を揃える。
- レスポンシブ・ウェブ・デザイン
- Google も推奨している。
- URL が同じ。
- 振り分けが不要。
- Google のクロールが一回で済む。
- Google も推奨している。
- スマホ、タブレットなど多様になってテストが大変。
- ツールを使って次世代に進む。
- スマホ用フレームワークを使う。jQuery Mobile
- Twitter のフレームワークは、RWD に対応している。
- 採用サイトが多い。
- Adobe Shadow が神ツール。
- 各デバイスの操作を同期できる。
- iPad のデバッグを PC で出来る。
- 人は待てない。
- 低速化の時代
- 3秒ルール。
- ブロードバンドの普及率が下がってきている。
- スマホでしかネットを見ない。
- なぜ遅いのか?
- CSS のロード
- 画像のロード
- コネクション
- ツールを使う
- CSS を圧縮する。
- ウェブサービスとかソフトとか。
- 画像を圧縮する。
- PNG が綺麗で軽い。GIF の代わりに使う。
- 専用の圧縮ツールを使う。
- メタ情報を削除する。
- 画像の個数を減らす。HTTP コネクションを減らす。
- CSS スプライトを使う。
- ウェブサービスを使う。
- CSS スプライトを使う。
- CSS を圧縮する。
- 低速化の時代
- 作業効率を上げる。
- 次世代 CSS
- 変数が使える。
- 入れ子が使える。インデントして使う。
- ミックスイン ( 定義 ) が使える。
- 欠点
- コンパイル
- プレビューが面倒。
- 新しく覚えるのが大変。
- SASS がおすすめ。
- CodeKit でプロジェクトを作成する。
- Compass をインストール。
- リセット CSS が含まれている。
- スライスした画像からスプライト画像を生成できる。CSS も生成できる。
- Compass をインストール。
- 次世代 CSS
次世代 Web サーバーを使って Web 制作を効率化しよう ( 阿部正幸さま )
CPI のサーバーに乗り換えたい…。
- 世界は海底ケーブルで繋がっている。
- サーバー選定について
- 共用サーバー市場
- 年々価格が下落している。
- 各社比較
- CPI の ACE01 は再販できる。
- 複数のクライアントを一つの契約でまとめられる。
- PHPSPEED でサーバーのベンチマークを測定できる。
- CPI の ACE01 は再販できる。
- サーバー選びは要件を確認して選ぶ。
- データベースはいくつ?
- マルチドメインはいくつ?
- 再販する?
- 独自 SSL は利用できる?
- 共用 SSL は盗聴のリスクがある。
- PHP のメモリリミット制限を確認する。
- phpinfo() で確認する。
- 共用サーバー市場
- 便利機能を使って効率化しよう
- SmartRelease
- 標準でテストサイトと公開サイトが準備されている。
- リリース時の問題
- 手動でやると危険。
- ワンクリックでファイル転送が可能。
- バックアップを自動で取得している。
- 毎日深夜に自動でバックアップ。
- 公開時に自動でバックアップ。
- 任意のタイミングでバックアップ。
- バックアップは 30 世代保持できる。
- 任意のバックアップを保存しておける。
- SmartRelease
さいごに
大変勉強になりました!
スピーカーとスタッフの皆様、お疲れ様でした&ありがとうございました!