ドリル式 やさしくはじめる Webデザインの学校 講義＋BiNDを使ったチュートリアルによる短期マスターコース
- 著作者名：佐藤好彦、 坂本典子、 そうまかおり、 栗谷幸助、 アマルゴン
- 監修者名：デジタルステージ
-
- 書籍：2,508円
- 電子版：2,508円
- B5変型判：224ページ
- ISBN：978-4-8399-5854-1
- 発売日：2016年08月12日
- 備考：初中級、Win/Mac
- Tweet
- mixiチェック
内容紹介
ドリルで、考えながら、作りながら、習得する。やさしく実践的なWebデザインの学校、開校です！
考えながら、作りながら、習得する。
プロではないけれどWebサイトをデザインしたり運営したりしなければいけない人のための、Webデザインの学校です。
たとえば、こんなこと、ありませんか？
●会社やお店のWebサイトを作ったけれども、「デザインのセンス」がなくイマイチ見栄えがしない。集客のためにもサイトのデザインをどうにかしたい！
●費用をおさえるため、テンプレートを使ってWebサイトを作ってみたが、更新しているうちにレイアウトが崩れてしまったまま……どうしよう！
●Webサイトのスマートフォン対応がよく言われているが、実際どのように作ればいいのか、サイトの作り方や対処法を優しく教わりたい
●最近流行のWebデザインやトレンドについて、いまひとつつかめてない。まとめて読める、やさしく教えてくれる本はないのかな？
……そういう悩みに、本書はばっちり効きます。
本書は3つのコースでできています。
Part 1「Basicコース」では、Webサイトが表示されるしくみや、現在のWeb制作・運営者が知っておきたい基礎知識をコンパクトにまとめ紹介します。
Part 2「Drillコース」は、問題形式でWebデザインのコツを掴んでいきます。「リンクがわかりやすいのはどちら？」「見やすいナビゲーションはどちら？」「文字が読みやすいのはどちら？」などの問題が出されますので、2つのデザインを見比べて、ぜひ考えてみてください。問題を自分で考え、その後で解説を読むことで、単に解説を読むだけよりも、深く納得感を持って理解でき、「デザインを考える力」が身につくようになっています。
そしてPart 3「Tutorialコース」は、チュートリアル素材を使って、レスポンシブWebウェブを制作する、誌上ハンズオンセミナーとなっています。
本書で使用するのはデジタルステージが販売しているBiNDというソフトです。BiNDは、HTMLを書く知識がなくても、洗練されたデザインのWebサイトが短時間で作れるホームページ作成ソフトです。
自動でスマートフォンサイトに最適化するレスポンシブWebにも対応しています。
「Drillコース」で学んだWebデザインのノウハウの実践編となっていますので、ぜひ取り組んでみてください。
チュートリアル用の素材は、本書サポートサイトからダウンロードできます。
続きを読む
充実のラインナップに加え、割引セールも定期的に実施中！
商品を選択する
| フォーマット | 価格 | 備考 | |
|---|---|---|---|
| 書籍 | 2,508円 | ||
| 2,508円 | ※ご購入後、「マイページ」からファイルをダウンロードしてください。 ※ご購入された電子書籍には、購入者情報、および暗号化したコードが埋め込まれております。 ※購入者の個人的な利用目的以外での電子書籍の複製を禁じております。無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。 |
||
関連ページ
- コハルデザイン http://koharu-design.com
- 4ReaL Design http://4real-design.com
- 株式会社デジタルステージ http://www.digitalstage.jp/
目次
Part1 Basicコース：Webデザインの基本を覚えよう1-01 Webサイトが見えるしくみ
1-02 Webサイトのデータ構造
1-03 モバイル時代のWebサイトはこう違う
1-04 詰め込み型サイトからコンパクトなコンテンツへ
1-05 Webサイト制作の流れ
1-06 サイトの制作①構造を練る
1-07 サイトの制作②コンテンツの準備
1-08 サイトの制作③サイトの公開と更新
Part2 Drillコース：Webデザイン力をアップしよう
category：ページのレイアウト
2-01 Webページの横幅の設定
2-02 ページの分割とサイト構成
2-03 カラム数とレスポンシブデザイン
2-04 テンプレートの選択
2-05 写真の配置
2-06 デザインに広がりを感じさせる
category：文字の扱い
2-07 Webフォントの効用
2-08 見出しの表現
2-09 文字のバランスとジャンプ率
2-10 インターフェースとしての文字
category：ナビゲーションとリンク
2-11 ナビゲーションの位置とアニメーション
2-12 グローバルナビの役割
2-13 ナビゲーションの存在感
2-14 ナビゲーションの整理
2-15 クリックを促すリンクの設定
2-16 フラットデザインでも押したくなるボタン
2-17 スマートフォン向けのナビゲーション
category：写真とグラフィック
2-18 写真のスペース
2-19 好感度の高いスライドショー
2-20 コンテンツへのリンク
2-21 ビルボードのデザイン
2-22 PCでもスマホでもクリックしやすい画像
2-23 コンバージョンが上がるバナー
2-24 写真のトリミング
2-25 複数写真を並列に扱う
2-26 組み写真によるデザイン
2-27 人物写真の扱い
2-28 ピクトグラムやアイコン
2-29 背景写真の加工
2-30 シンボルマークとしてのファビコン
category：配色
2-31 読みやすい配色
2-32 食欲をそそる配色
2-33 ターゲットに合った配色
category：SEO、コピー
2-34 検索エンジンに登録するWebページ情報
2-35 新規客を獲得するためのコンテンツ
2-36 Web原稿の編集
2-37 長い文章の扱い
2-38 altの設定をする
2-39 フォームで情報を集める
Part3 Tutorialコース：BiNDでレスポンシブサイトを作ってみよう
3-01 テンプレートの選択
3-02 背景やカラーの設定
3-03 SiGNとSHiFTで作るロゴとビルボードのデザイン
3-04 ナビゲーションの設定
3-05 Webフォントによる見出し・本文の設定
3-06 SiGNProで作るバナー
3-07 CSSテキストボタンの作成
3-08 スクリーンサイズに追従する画像幅の設定
3-09 フッタの作成
3-10 サイト名、ページタイトル、ディスクリプションの設定
3-11 レスポンシブの設定
3-12 フォームのデザイン
3-13 サイト公開の設定
