紙デザイナーのためのweb入門　コーダーから見たwebデザイン

秋田経済新聞文化センター 秋田中年会議所・第9回公開会議「KAMI/WEB（カミ・ウェブ）」

大規模

誰？

2009.10　トラパンツ入社

!!!!!2012.11　コーダーとして正式採用

関根 拓郎 株式会社トラパンツ　CP2（コードを書く集団）所属

はじめはデータ入力・映像・取材などの業務 「せっかくweb制作会社に入ったし」 というきっかけでHTMLを始める

行政、民間のサイトまで様々な規模のプロジェクトに携わる

大規模

コーダーって何する人？広い意味では コーダー：ソースコード（プログラム等）を書く人。 !web業界では HTMLなどを使って デザインからブラウザで表示するページの形に変換する 作業をする人

大規模

コーダーって何する人？データから ・画像化する部分をパーツごとに切り出す ・要素の大きさや色、余白、位置などの情報を数値化する などしてデザインを再現する

100px

#FF8000

大規模

大規模

デザインとコーディングの分業コーディングにおいて ・どっちもできるデザイナーが一人で ・デザイナーとコーダー　それぞれ専門の人で分業

design codingdesign + coding

大規模

大規模

デザインとコーディングの分業トラパンツでも 以前は「どっちもできるデザイナー」が1人で担当

!スタッフの数が増えるに従って少しずつ分業化 2012年後半からは、ほぼ完全に分業体制

web制作会社であるため、webの仕組みなどを理解してもらうため デザイナーにもコーディングの勉強をさせている

大規模

デザインとコーディングの分業・社内体制による分業 ・コーディングの外部委託 →データだけで意図が伝えられない部分の確認を

特に データの作り方によって生じる 余計な確認事項や調整・修正などを極力無くすこと

これで制作スケジュールを押すともったいない

大規模

webの基礎知識

単位

px（ピクセル）

大規模

webの基礎知識 単位

px（ピクセル）

・mm、pt　などは原則使用しない

・整数値で指定し、1.5pxのような小数にしない

大規模

webの基礎知識

色

RGB

大規模

webの基礎知識 色

RGB

・CMYKは原則使用しない　※写真素材などにも注意

・カラープロファイルはsRGBが標準

大規模

webの基礎知識

文字

大規模

webの基礎知識 文字

通常のテキスト

記事の本文などで表示する、ごく一般的なテキスト !・一般的でないフォントは指定しない ・文字詰めへの対応が難しい 　　・OSなど環境によってフォントにばらつきがある

大規模

webの基礎知識 文字

画像化したテキスト

フォント種類やレイアウト、エフェクトなどが自由 !・多用するとページの表示が遅くなる ・更新頻度の高い部分に使用すると修正が手間になる

大規模

webの基礎知識 文字

可変コンテンツ（テキスト量・行数など）

テキスト量やフォントサイズは変化する ・サイトの更新によるテキスト量の変化 ・環境によってフォントサイズが異なる 　→1行に入るテキスト量が変化 　→あるテキストを表示するのに必要な行数が変化

印刷のような用紙サイズの制限などはないので 「固定サイズの枠内に収める」ことにこだわりすぎない

大規模

デザインデータ作成上の注意

コーダー

幅・高さ・色 位置・余白etc

設定や習慣だけでも 見やすく、やり直しの少ないデータに

大規模

デザインデータ作成上の注意レイヤーの整理整頓

1. レイヤーをあまり統合しない 2. グループ分け 3. レイヤー名やグループ名をつける 4. 不要なレイヤーの削除

大規模

デザインデータ作成上の注意

人から受け取ったデータがこんな置き方だったら

大規模

デザインデータ作成上の注意

大規模

デザインデータ作成上の注意

不要なら削除

大規模

デザインデータ作成上の注意ガイドを活用するなどしてズレを防ぐ

たまに 301px のような半端なサイズが

大規模

デザインデータ作成上の注意線や図形のにじみを作らない

位置に小数点がある場合など

100% 3200%

1px で引いた線が

大規模

おさらい・整数値のpx単位で ・色はRGB ・通常のテキストで一般的でないフォントを指定しない ・通常のテキストでの文字詰めなどは難しい ・自由なフォントや文字組を実現するには画像 ・webは可変 　　・文字数の変化や、行数の変化を念頭に ・レイヤーの整理整頓 ・ガイドを活用してズレをなくす

大規模

最後に

デザイナーはコーダーのために仕事をするわけではないが !

デザイナーの意図を読み取りやすい データの作り方への意識をお願いしたい

ご清聴ありがとうございましたスライド公開します