Tag Archives: コーディング

【ペパボ社内向けHTML講座】基本的なHTMLタグの説明 from @chocolatina

※社内勉強会の様子

【ペパボ社内向けHTML講座】WEBサービスのデザインとは from @chocolatina に続く、第2回は基本的なHTMLタグの説明です。

ブログ更新している人にとっても使えるタグも紹介されています!

続きを読む

【ペパボ社内向けHTML講座】WEBサービスのデザインとは from @chocolatina

ネタがつきてきたので社内の勉強会で、ディレクションにも役立つものをブログのネタに使わせてもらうことにしました。

本日はペパボ新卒デザイナー陣にコーディングを教えたデザイナー しょこたんが、社内で主催したHTML入門講座の内容を、ほぼそのままお届けします。

※写真はHTML勉強会の様子

ペパボHTML入門講座1(全六回)

講師プロフィール @chocolatina
社内のあだ名:しょこたん
http://chocolatina.jp/
http://twitter.com/chocolatina

paperboy&co.2009年入社
hetemlデザイナー(2年半)  → 現在、パブー デザイナー
その間、新卒1期生のコーディング講師ギフポ立ち上げデザイン
HTML歴:13年ぐらい
CSS歴:11年ぐらい
好きな海外ドラマ:LOST/FRINGE/STARTREK/FULLHOUSE

HTMLに入る前に、まずはじめに

WEBデザインとは

  • モテるホームページを作る魔法のようなもの ( WEBデザインが出来るとモテる。)
  • アートとは違う ( アートは表現そのものが目的。)
  • 「目的」ではなく「手段」( あくまで何か問題を解決するための「webデザイン」)
  • 情報をデザインすること( 情報を整理し、訴求し、ユーザーにアクションを起こさせる。)

コーディングとは何か

デザイナーが、PhotoshopやFireworksで作った一枚の絵を、
コーダーがそれぞれ画像やテキストに切り出して、HTML/CSS/JSなどを使って組み立てること
ペパボではデザイナーとコーダーは特に分かれていない
制作会社によっては分かれてる

何のためのコーディングか

サイトの目的(情報提供や申込など)を達成させるため。
理論的には、その目的が効果的に達成されれば、WEBデザイン・コーディングは成功といえる

そのためには
  • WEBサイトの表示を正しく行い  (信頼感の保持)
  • ユーザーが迷わずに目的を達成出来るよう導線を確保し (ユーザービリティ)
  • 検索エンジンにも最適化され (検索順位の保持)
  • 更新性を高めメンテナンスしやすくし (人件費の削減とスピーディな情報提供)
  • ページ容量を少なくして表示を早くする (離脱率の低下)

WEB制作会社のWEBデザイナーと、WEBサービスを提供しているペパボのWEBデザイナーの違い

WEB制作会社

チームにいるメンバー
よくある例) マネージャー1名、営業2名、
WEBディレクター1名、WEBプログラマー1名、WEBデザイナー2名、コーダー2名
  • サイト製作費はクライアント企業
  • 色々なサイトを担当する。
  • クライアントから求められたものを作る
  • エンドユーザーにとって最適でも、クライアントが求めていないものは作れない。
  • サイト製作費はクライアント企業の広告費から捻出される

ペパボのようなWEBサービスの会社

チームにいるメンバー

例)部長またはプロデューサー1名、ディレクター複数名、サポート複数名、
WEBプログラマー複数名、サーバー複数名、WEBデザイナー複数名
※人数はサービスの規模により異なります。

WEBサービスのデザインをする
  • サイト製作費は自社で持つ
  • ひとつのサービスにコミットし、よりエンドユーザーの近くで開発ができる。

紙とWEBは違う

webと紙の共通点は「読む」「見る」ということ。
視覚的に情報を得るということ。

紙の特徴

  • 環境に依存しない / 修正に時間がかかる
  • 文字の大小の差が大きくてもいい
  • 自由なレイアウトが組める / じっくり読む / CMYK

WEBの特徴

  • 環境に依存する / 修正がすぐできる / 字が小さすぎると読めない
  • 音やバイブなどさまざまな表現手法がある
  • ななめ読みされる / RGB

短納期タスクにおける近道について

仕事では作業時間は限られている
迷路の問題
小難しいことは後回しにして、
とりあえず目的だけは必ず達成させる
目的を達成させるための解決法はいくらでもある
自分の引き出しを増やすこと

自分で自分をメンテナンス

プロになってからのほうが気が遠くなるぐらい道が長い
常に情報収集をして自分をスキルアップさせていく

コーディング作業において目指すところ

PSDを正しく反映しながら、
HTML/CSS/Javascript の特性を生かした
ユーザー視点のWEBページの制作をする
ブラウザ間での差異をなるべく小さくする
慣れてきたら、「何かを解決するためのコーディング」を目指す

HTMLについて

★htmlとは

Hyper Text Markup Language
色々と テキストを マークアップできる 言語

★xhtmlとは

Extensible Hyper Text Markup Language
めっちゃ 色々と テキストを マークアップできる 言語

以前はメモ帳のような
単純なテキストのやりとりをしていた。

htmlとそれを表示するブラウザの出現によって
テキストファイルを色々な形に表現できるようになった。

普段目にするWEBページとは

HTMLとCSSなどを組み合わせたもの。
HTML=体、CSS=服

Firefoxを起動→表示→
スタイルシート→スタイルシートを使用しない

としたときに見えるのが、ページの本体(HTML)。

まずはHTMLを正しく書けるようになり、
次にCSSで色をつけたりレイアウトしたりする。

次回の記事ではHTMLを正しく書く練習に進みます。