【無料で読める】今ある仕事にWebをプラス！ Web系知識ゼロの DTPデザイナーが ホームページを作ろうと思った時、最初に読む本

☆★☆ 今だけ 99円 出版キャンペーン 開催中 ☆★☆

＝・＝・＝・＝・＝・＝・＝・＝・＝・＝・＝・＝・＝

まんが仕立てで、分かりやすさを意識しました (^^)

この本は、DTPデザイナーで、
紙の仕事はバリバリこなしているけど、
Webはまだ始めていない方

内心はWebにも関心があるけど、
なんとなく敷居が高いと思っている方に
向けて書きました。

私自身、現在はWebとDTPの仕事をしていますが、
最初は印刷会社に新卒で入社しました。

Macのマウスがまだ四角くくてボタンが1つ、
Illustratorは白黒画面で作業、⌘+Yでカラー画面にして確認する、
出力センターで印画紙出力をしてもらう…という時代でした。

当時私は新卒だったので
「MacでのDTPを覚えて」ということで、
手作業での版下制作はしませんでしたが、
手作業で版下を作っている先輩方がいました。

トレスコで印画紙を焼いたり、
ロットリングで線を引いたり、
ピンセットを使って写植をまっすぐに貼り、
修正の時は、また1文字ずつずらすという…
手先が器用で、専門技術や専門知識のある先輩方でした。

が！

時代の波なのか手作業での版下制作が減り、
やがて全ての制作がDTPへ切り替わりました。
手作業での版下制作にこだわっていた一部の先輩は、
どこかに行ってしまいました。

そしてさらに時は流れ……………………
……………………………コロナの大流行。

仕事をする中で、手渡しの紙媒体より
Webが重宝されるのを見ました。

センスもあり、技術もあり、経験も実力もある
DTPデザイナーの諸先輩方の仕事が減るのを見ました。

なんだか、すごくもったいない。

DTPでつちかった、センスや技術を
Webに流用できればいいのに…と思いました。

それで、DTPデザイナーの諸先輩方から、
たくさんのヒントをいただき

Web業界の方からすると型破りな方法かもしれませんが、
DTPデザイナーだからこその、
最初の１歩のための本を、
DTPデザイナーの大先輩、
アーキ―先生と出版することにしました。

DTPの仕事にプラスして、
簡易的なWebの仕事も
ぜひ請けてもらいたい！
という願いを込めています。

この本をとっかかりとして、
DTPデザイナーの方が
Web制作にも興味をもってくれたり

実際に、Webの仕事をとってくれたら、
ほんとうに嬉しいです！

目次 —————————–

はじまり…（プレゼントQRコード掲載）
・Ｗｅｂページがあつまったものがホームページ
・ＷｅｂページはＨＴＭＬ，ＣＳＳ，画像などで構成されている

——————

１章　イラストレーターでスマホサイトをデザインしてみよう
・デザインするにあたり、気を付ける部分
・アートボードの複製
・作業するときの画面表示サイズの目安・1枚で作らなくてOK

——————

２章　イラストレーターを画像にしてフォトショップに持っていこう
・イラストレーターのアートボードをWeb用に書き出す
・Ｗｂｂで主に使用する画像形式
・スライスを使ってみる
・フォトショップのデータをWeb用に書き出す
・Webでのファイル名の付け方

——————

３章　ＨＴＭＬに画像を貼り込もう
・ドリームウィーバーを使ってみる
・最初のページは「index.html」とする決まりがある
・ホームページはサーバーにアップされてみることができる
・HTMLファイルをブラウザで開いて確認する
・HTMLは大きく2つのパートで構成されている
・基本のHTMLの意味と書き方のルール
・画像のファイルパス
・ブラウザの拡大縮小率の変更
・画像を貼り込むための「imgタグ」について
・titleタグを書き換える
・内容をグループ化する「div」タグ
・これまで使ったタグの一覧表
・使用する画像の大きさについて

——————

４章　CSS で画像を調整しよう
・ドリームウィーバーで新規でCSSファイルを作成する
・CSSファイルをHTMLファイルと紐づける
・CSSの基本的な書き方
・全てのパーツのスキマをゼロにするCSS
・行間を文字サイズと同じにするCSS、画像の横幅を指定するCSS
・コードの入れ子について
・画像の下のスキマを消すCSS、全体を囲むdivの横幅を指定するCSS
・横幅を指定するコード、max-width とwidthの違い
・divを左右の中心に持ってくるCSS
・カラーコードを使って背景の色指定をしてみよう

——————

５章　スマホ対応のコードを書いてみる
・ビューポートタグ、モバイルフレンドリーテスト
・ビューポートタグ有り無しの違い、電話用のコード

——————

おまけ①　SNS でシェアされた時のために
・OGP画像を用意してみよう
・OGP画像のサイズ
・フォトショップからWeb用に書き出し
・OGP画像シュミレーター、OGP用のコード

——————

おまけ②　ファビコンを設定しよう
・ファビコンって、何
・ファビコンジェネレーターを使ってみよう
・ファビコンジェネレーター：iOS仕上がりイメージ
・ファビコンジェネレーター：Android仕上がりイメージ
・ファビコンジェネレーター：データのダウンロード
・ファビコン用のコード

——————

６章　サーバーにアップしよう
・ドメインについて
・ドメインはサイトと紐づけないといけない
・URLについて
・SSLについて
・サーバーによってデータをアップするフォルダが異なる
・FTPソフトについて
・ファイルジラの使い方

——————