出版書誌データベース

考えながら、作りながら、習得する。
プロではないけれど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デザインのノウハウの実践編となっていますので、ぜひ取り組んでみてください。
チュートリアル用の素材は、本書サポートサイトからダウンロードできます。

Part1　Basicコース：Webデザインの基本を覚えよう
　　1-01　Webサイトが見えるしくみ
　　1-02　Webサイトのデータ構造
　　1-03　モバイル時代のWebサイトはこう違う
　　1-04　詰め込み型サイトからコンパクトなコンテンツへ
　　1-05　Webサイト制作の流れ
　　1-06　サイトの制作1 構造を練る
　　1-07　サイトの制作2 コンテンツの準備
　　1-08　サイトの制作3 サイトの公開と更新

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　サイト公開の設定

他著：佐藤　好彦
Webデザイナー、グラフィックデザイナー。Webなどのデザイン・プランニングを中心に、デザイン関連の書籍や雑誌記事の執筆、講演なども手がけている。著書に『デザインの教室ー手を動かして学ぶデザイントレーニング』、『デザインの授業ー目で見て学ぶデザインの構成術』（以上MdN）、『ビジネス教養としてのデザイン』、『フラットデザインの基本ルール』（インプレス）、『ウェブサイト制作のワークフローと基礎技術』（技術評論社）など。東京造形大学非常勤講師。

他著：坂本　典子
コハルデザイン代表。フリーランスWebデザイナー。PC・スマートフォンサイトの制作を中心に、ロゴやイラスト、キャラクターデザインなども行う。やわらかい女性向けのデザインが得意分野。共著『WordPressではじめるかわいいウェブサイト』（ビー・エヌ・エヌ新社）がある。

他著：そうま　かおり
4ReaL Design主宰。Web制作プロデューサー／デザイナー。Webデザインや紙物のデザインを中心にフリーランスとして4ReaL Designで活動中。BiND3からビジネスアイテムとして使い続けており、フルカスタマイズ化をつねに研究し、クライアントにフィードバックしている。