Web制作者のためのSublimeTextの教科書

2014-04-07 16.58.19

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ」が届きました。SublimeTextについてはタグ「SublimeText」のように何度かこのサイトでも取り上げてきていましたが、日本語で書かれた解説書がなく、利用方法を詳しく知るためにはネットで情報を調べなければならないので、まだまだ一般に普及するまでには時間がかかるかと思っていましたが、この解説書「Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ」の登場で一気に普及ペースが早まりそうですね。

2014-04-07 16.58.33

ページももこのようにわかりやすく解説されているので、初心者にもオススメです!!

目次

第1章 Sublime Textを導入しよう

  1. Sublime textとは
  2. Sublime Textのダウンロードとインストール
  3. Sublime Textの画面解説
  4. 対訳付きメニュー一覧
  5. Sublime Textの環境設定
  6. パッケージのインストール
  7. 日本語環境の設定
  8. テーマの変更

第2章 覚えておきたい標準機能

  1. 基本的な編集機能
  2. コーディングルールに対応する
  3. プロジェクトの活用
  4. コード入力に役立つ機能
  5. HTML/CSSに役立つ機能
  6. プログラミングに役立つ機能

第3章 パッケージで機能拡張しよう

  1. パッケージについてもっと詳しく知っておこう
  2. パッケージを管理する
  3. パッケージの探し方
  4. パッケージを開発する

第4章 プロが教える特撰パッケージ

  1. どんなときにも役に立つ必須パッケージ
  2. Web制作に役立つパッケージ
  3. EmmetやHayakuでHTML/CSSの入力を効率化する
  4. JavaScriptでの開発に役立つパッケージ
  5. サーバサイドからMarkdownまでさまざまな言語用のパッケージ
  6. ソース管理システムや簡易Webサーバを運用する
  • 付録
  • ショートカットキー一覧
  • 環境設定一覧
Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ
上野正大 杉本 淳 前川昌幸 森田 壮
インプレスジャパン
売り上げランキング: 1,753

wEVA社内でのサイト制作の流れ

wEVA社内でのサイト制作の流れ

他社でも似たり寄ったりではないかと思いますが、wEVA社内でのサイト制作の流れを簡単に書いていきます。

ヒアリング

これが 一番重要 !!「どんなサイトを制作するかをクライアントとの会話の中でイメージしていきます。すれ違いがないようにここでの意識あわせも重要です。

ここでサイトの目的やどのような効果を生み出したいかも確認しておきます

目的のターゲット層をイメージして、そのターゲットに対してどのようなメッセージを発信したいのかなどを確認しつつ進めていきます。

ワイヤーフレーム制作

ヒアリングしながらざっと描くこともありますが、クライアントによっては「落書きしている」と不愉快に思う人もいることがあるので注意です。ただ、この場でまとめたワイヤーフレームが最後まで設計図のようなものになるので、自分の場合はワイヤーフレームを一番大事に、数字も全部書き込んでいます。

いろいろとツールもありますが、自分は手書き派です♪

同時にベースとなる横幅も決めて、グリッドを線も一緒に引いておきます。wEVAの場合はだいたい960〜984pxで12分割したグリッドをベースにすることが多いですね。

※ワイヤーフレームの事を「フレームワーク」という制作会社の方もいるのですが…まぁ、いいや(^^;

いただいた写真をその場で切り貼りして「こんな感じ?」とやることもたまにあります。

カラー選択

使用するカラーを決めます。会話しながら決めることが多いので、ワイヤーフレームをつくるより前にやってしまうこともあります。

実はここが一番試行錯誤します

「沖縄の海をイメージした青」と言っても、人によっては暗い青だったり、グルーンが入った青だったりといろいろな青があったり、会話の中でも確認が一番必要なのが配色です。

先のワイヤーフレームにその場で色を塗ってしまうこともあるので、鞄の中には色鉛筆を常に入れていることもありました。

サイトマップ制作

同時にサイトの全体構成を書き出しておきます。トップページにお問い合せページ、お問い合せページの中に来る確認ページとかお問い合わせ受け付けましたページとか…ページ数と全体構成を把握しておくだけでもミスは少なくなります。

ラフデザイン制作(モックアップ制作)

20130826

PhotoShopなどで制作することもあります。最近はベースとなるHTMLにCSSで直接書き始めることも(^^;

この工程をクライアントにも時々見せるようにしていきながら、大きなズレがないようにしていきます。

配色の最終決定やサイズの最終決定はここでおこないます。

パーツ制作

ラフデザインで数値や配色が最終決定したので、このサイズにあわせてのパーツをつくります。

コーディング

本格的にHTML+CSSでコーディングします。これも試験サーバーなどに載せながらクライアントにその都度確認していただくこともありますが、人によっては原稿がないのに「○○○○○○○」を見て「これなんですか?」と怒る方もいるのでクライアントにはそのことも説明しておきましょう。「原稿待っています、原稿待っています…」にして更に怒られたことがあります(>_<)

チェック

クライアントのチェックやブラウザによる見え方のチェックをおこない微調整をおこないます。

公開

サイトを公開します。

wEVAの場合は意識してクライアントとの会話を多くするように心がけています。クライアントによってはこれを嫌がる方もいるのですが、制作途中を見せることで大きなズレがおこらないようにと考えています。

meta Content-Typeで文字コードを指定しましょう

ホームページを制作していると、HTML上ではちゃんと日本語が表示されているのにブラウザでは文字化けってないですか?

そんな時には、前述のheadの中に<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />で文字コードがちゃんと指定されていてテキストエディタで使った文字コードと一致しているか確認しましょう

ここで指定した文字コードでブラウザはHTMLをWebページに解析して表示させるので、テキストエディタで利用している文字コードとこの文字コードが一致していないと文字化けの原因になることがあります。

文字コードとは

世界中にはいろんな言語があります。アルファベットのようにA〜Z(a〜z)だけでなく、日本語のようにひらがながあって、更に漢字がある地域など…これをコンピュータ上で各文字に対してコード番号というのが割り振れれるルールがあります。

そんな中、日本語を表すコードとしてShift JISであったり、EUC-JPであったり…といくつかのコードが定められましたが、現在は「UTF-8」コードが主流になっています。

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】
草野 あけみ
翔泳社
売り上げランキング: 71,896