Recommended
More Related Content
Similar to 紙デザイナーのためのweb入門 〜コーダーから見たwebデザイン〜
Similar to 紙デザイナーのためのweb入門 〜コーダーから見たwebデザイン〜 (20)
Recently uploaded
Recently uploaded (11)
紙デザイナーのためのweb入門 〜コーダーから見たwebデザイン〜
- 1. 紙デザイナーのためのweb入門 コーダーから見たwebデザイン 秋田経済新聞文化センター 秋田中年会議所・第9回公開会議「KAMI/WEB（カミ・ウェブ）」
- 2. 大規模誰？ 関根 拓郎株式会社トラパンツ CP2（コードを書く集団）所属 2009.10 トラパンツ入社 ! ! ! ! ! 2012.11 コーダーとして正式採用 はじめはデータ入力・映像・取材などの業務 「せっかくweb制作会社に入ったし」 というきっかけでHTMLを始める 行政、民間のサイトまで様々な規模のプロジェクトに携わる
- 3. 大規模コーダーって何する人？ 広い意味では コーダー：ソースコード（プログラム等）を書く人。 ! web業界では HTMLなどを使って デザインからブラウザで表示するページの形に変換する 作業をする人
- 4. 大規模コーダーって何する人？ データから ・画像化する部分をパーツごとに切り出す ・要素の大きさや色、余白、位置などの情報を数値化する などしてデザインを再現する 100px #FF8000
- 5. 大規模
- 6. 大規模デザインとコーディングの分業 コーディングにおいて ・どっちもできるデザイナーが一人で ・デザイナーとコーダー それぞれ専門の人で分業 大規模 design + coding design coding
- 7. 大規模デザインとコーディングの分業 トラパンツでも 以前は「どっちもできるデザイナー」が1人で担当 ! スタッフの数が増えるに従って少しずつ分業化 2012年後半からは、ほぼ完全に分業体制 web制作会社であるため、webの仕組みなどを理解してもらうため デザイナーにもコーディングの勉強をさせている
- 8. 大規模デザインとコーディングの分業 ・社内体制による分業 ・コーディングの外部委託 →データだけで意図が伝えられない部分の確認を 特にデータの作り方によって生じる 余計な確認事項や調整・修正などを極力無くすこと これで制作スケジュールを押すともったいない
- 10. 大規模webの基礎知識単位 px（ピクセル） ・mm、pt などは原則使用しない ・整数値で指定し、1.5pxのような小数にしない
- 12. 大規模webの基礎知識色 RGB ・CMYKは原則使用しない ※写真素材などにも注意 ・カラープロファイルはsRGBが標準
- 13. 大規模webの基礎知識 文字
- 14. 大規模webの基礎知識文字 通常のテキスト 記事の本文などで表示する、ごく一般的なテキスト ! ・一般的でないフォントは指定しない ・文字詰めへの対応が難しい ・OSなど環境によってフォントにばらつきがある
- 15. 大規模webの基礎知識文字 画像化したテキスト フォント種類やレイアウト、エフェクトなどが自由 ! ・多用するとページの表示が遅くなる ・更新頻度の高い部分に使用すると修正が手間になる
- 16. 大規模webの基礎知識文字 可変コンテンツ（テキスト量・行数など） テキスト量やフォントサイズは変化する ・サイトの更新によるテキスト量の変化 ・環境によってフォントサイズが異なる →1行に入るテキスト量が変化 →あるテキストを表示するのに必要な行数が変化 印刷のような用紙サイズの制限などはないので 「固定サイズの枠内に収める」ことにこだわりすぎない
- 17. 大規模デザインデータ作成上の注意 コーダー 幅・高さ・色 位置・余白etc 設定や習慣だけでも 見やすく、やり直しの少ないデータに
- 18. 大規模デザインデータ作成上の注意 レイヤーの整理整頓 1. レイヤーをあまり統合しない 2. グループ分け 3. レイヤー名やグループ名をつける 4. 不要なレイヤーの削除
- 20. 大規模デザインデータ作成上の注意
- 22. 大規模デザインデータ作成上の注意 ガイドを活用するなどしてズレを防ぐ たまに 301px のような半端なサイズが
- 23. 大規模デザインデータ作成上の注意 線や図形のにじみを作らない 100% 3200% 位置に小数点がある場合など 1px で引いた線が
- 24. 大規模おさらい ・整数値のpx単位で ・色はRGB ・通常のテキストで一般的でないフォントを指定しない ・通常のテキストでの文字詰めなどは難しい ・自由なフォントや文字組を実現するには画像 ・webは可変 ・文字数の変化や、行数の変化を念頭に ・レイヤーの整理整頓 ・ガイドを活用してズレをなくす
- 25. 大規模最後に デザイナーはコーダーのために仕事をするわけではないが ! デザイナーの意図を読み取りやすい データの作り方への意識をお願いしたい