Webridge Meeting SP11 [ Web 制作の効率アップ術～イザというときに困らないために～ ] に参加しました #wmsp11

2012 年 9 月 8 日 ( 土 ) 13:00 – 18:00、アルファあなぶきホールで行われた Webridge Meeting SP11 [ Web 制作の効率アップ術～イザというときに困らないために～ ] に参加しました。

今回は、ウェブ制作者が今取り組んでいる業務の効率を上げるべく、Web 制作の効率化について考えるセミナーです。

この記事の目次

各セッションの覚え書き
さいごに

各セッションの覚え書き

各セッションの内容を全部書くのは無理なので、気になった所だけ書いています。

なぜ効率化？わたしたちがやるべきこと ( 神森勉さま )

本当の効率化とは？
- 大事なのは成果物の品質。
効率化ために CMS を導入する。
- なぜ、CMS を導入する？
  - お客様が更新できるように。
  - HTML がわからない人でも更新できる。
  - お客様に素早く情報提供できる。
HTML を「超ラク」に書きたい。
- 書籍のページをコーディングしてみる。
  - いきなりコーディングを始めるのではなく、構造を把握してからマークアップすると効率が良い。
- 中吊り広告をコーディングしてみる。
  - 内容を把握してから、マークアップの設計をする。
仕事は「作業」と「考えること」に分けることができる。
- 「作業」と「考えること」を一緒にしない。
- 作業時間を減らし、考える時間を増やす事が大切。
下準備の時間が大切。
- 効率的に調理するため。

情報収集から始まる Web 制作の効率化 ( 大月茂樹さま )

情報収集に関するセッション。三輪車で息子さんが転んだの痛そうだ。

考えること
- 最適なツールは？
下準備
- 情報収集
  - ツールや制作アプローチ、トレンドなどを知る。
    - 検索
    - 専門誌（雑誌・書籍）
    - RSS・メルマガ
      - wp-d.org（WordPressのサイト）
      - コメンターというサイト。
    - ソーシャルメディア
    - ウェブサービス
      - グノシー
      - Google アラート
    - 知人・職場の同僚
- 思考・試行
  - 特徴を理解しアウトプットを想像する。
  - 自分で試してみないと長所も短所も分からない。
もう一つの効率化
- 企画・提案が通らない原因。
  - クライアントのビジネスの理解。
  - 企画書で使える画像・事例をピックアップしておく。
効率化により得られるもの
- アウトプットのクオリティー
- クライアントからの信頼
- 納得できる対価

定時で退社する！ Web 制作時短テクニック集 ( 筒井志信さま )

地獄のミサワｗ

サイトリニューアル
- サイトマップを作る
  - ローカルにサイトを準備してターミナルでファイル一覧を作る。
  - ページ一覧を取得する筒井さんのプログラム
  - ページタイトルを取得する筒井さんのプログラム
  - アドレスリストを一気に開く筒井さんのプログラム
  - jQuery をブックマークレットで読み込んで、コンソールでリンクの数を数えたり、見出しの数を数えたりする。
- ワイヤーフレーム
  - ダミーテキストを生成するウェブサービス。
  - ダミー画像を生成するウェブサービス。
- ブックマークレットで本番サイトとテストサイトを切り替える。
フォトギャラリー
- Word 原稿と画像を貰い、エクセルでタグを生成する。
- サムネイルやリサイズをソフトで一気にやる。アールアルファ？
- PHP でプログラムを書いて生成する。
- Adobe Bridge でやると簡単。PDF 出力もできる。
？？？？ ← 聞き逃した！
- 一定期間だけ新着マークを出す。PHP or SSI で自動更新する。
- URL にパラメーターを付けて、出力方法を変える。同じファイルが複数できるのを防ぐ。
- PHP でスクレイピングし、ファイルを生成する。
浮いた時間を勉強にあてる。

HTML5 / Sass / CoffeeScript – ツールを活用した Web サイト制作新時代 ( たにぐちまこと様 )

デモが凄かった…。

Mac のソフトが良いらしい。
閲覧環境が変わってきた
- スマホ、タブレットなど多様になってテストが大変。
  - Android はクセの強い端末が多いらしい。国産端末に多いらしい。
  - 実機確認をどうするか？
    - ヤマダ電機で確認する？
    - 検証センターを利用する。
    - 主要な端末を揃える。
  - レスポンシブ・ウェブ・デザイン
    - Google も推奨している。
      - URL が同じ。
      - 振り分けが不要。
      - Google のクロールが一回で済む。
ツールを使って次世代に進む。
- スマホ用フレームワークを使う。jQuery Mobile
- Twitter のフレームワークは、RWD に対応している。
  - 採用サイトが多い。
Adobe Shadow が神ツール。
- 各デバイスの操作を同期できる。
- iPad のデバッグを PC で出来る。
人は待てない。
- 低速化の時代
  - ３秒ルール。
  - ブロードバンドの普及率が下がってきている。
  - スマホでしかネットを見ない。
- なぜ遅いのか？
  - CSS のロード
  - 画像のロード
  - コネクション
- ツールを使う
  - CSS を圧縮する。
    - ウェブサービスとかソフトとか。
  - 画像を圧縮する。
    - PNG が綺麗で軽い。GIF の代わりに使う。
    - 専用の圧縮ツールを使う。
    - メタ情報を削除する。
  - 画像の個数を減らす。HTTP コネクションを減らす。
    - CSS スプライトを使う。
      - ウェブサービスを使う。
作業効率を上げる。
- 次世代 CSS
  - 変数が使える。
  - 入れ子が使える。インデントして使う。
  - ミックスイン ( 定義 ) が使える。
  - 欠点
    - コンパイル
    - プレビューが面倒。
    - 新しく覚えるのが大変。
  - SASS がおすすめ。
- CodeKit でプロジェクトを作成する。
  - Compass をインストール。
    - リセット CSS が含まれている。
  - スライスした画像からスプライト画像を生成できる。CSS も生成できる。

次世代 Web サーバーを使って Web 制作を効率化しよう ( 阿部正幸さま )

CPI のサーバーに乗り換えたい…。

世界は海底ケーブルで繋がっている。
サーバー選定について
- 共用サーバー市場
  - 年々価格が下落している。
- 各社比較
  - CPI の ACE01 は再販できる。
    - 複数のクライアントを一つの契約でまとめられる。
  - PHPSPEED でサーバーのベンチマークを測定できる。
- サーバー選びは要件を確認して選ぶ。
  - データベースはいくつ？
  - マルチドメインはいくつ？
  - 再販する？
  - 独自 SSL は利用できる？
    - 共用 SSL は盗聴のリスクがある。
  - PHP のメモリリミット制限を確認する。
    - phpinfo() で確認する。
便利機能を使って効率化しよう
- SmartRelease
  - 標準でテストサイトと公開サイトが準備されている。
  - リリース時の問題
    - 手動でやると危険。
    - ワンクリックでファイル転送が可能。
  - バックアップを自動で取得している。
    - 毎日深夜に自動でバックアップ。
    - 公開時に自動でバックアップ。
    - 任意のタイミングでバックアップ。
    - バックアップは 30 世代保持できる。
      - 任意のバックアップを保存しておける。