8月12日、マイナビ出版より、「ドリル式 やさしくはじめる Webデザインの学校 〜講義+BiNDを使ったチュートリアルによる短期マスターコース」を発売しました。
アマゾンから購入
楽天ブックスから購入
(前書きより)
Webサイトのデザインでお悩みですか?
本書は、ノンプロのWebサイトデザイナーを対象にしたWebデザインを学ぶ本です。たとえば、こんな方が対象です。
- パソコンは得意なので会社やお店のサイトを作ったが「デザインのセンス」がなくサイトのデザインをどうにかしたい
- 費用をおさえてサイトを作りたい!とテンプレートを使ってWebサイトを作ってみたが、更新しているうちにレイアウトが崩れてしまったまま…
- スマートフォン対応サイトの作り方や対処法を優しく教わりたい
- プロではないけれど、最近流行のWebデザインやトレンドについてまとめて読める、わかりやすい本を探している
本書で学べる内容を以下に紹介します。
Part 1では、Webサイトが見えるしくみや現在のWeb制作・運営者が知っておきたい基礎知識をコンパクトにまとめ紹介します。
Part 2では、本書のメインパートで、ノンデザイナーの方々にWebデザインのコツを優しく掴んでいただくためのドリルになっており、デザインを見比べてみてよいデザインについての出題があります。そののち、解説でデザインの裏付けをひもときます。
そしてPart 3では、チュートリアル素材を使って、レスポンシブWebデザインを制作する、紙上ハンズオンセミナーを行います。
Part 3を中心に扱うWebサイト制作ソフト「BiND for WebLiFE(バインド・フォー・ウェブライフ、以下BiND)」は、HTMLを書く知識はないけれど、自分の手でホームページを作り、運営したいという多くの人のニーズに支えられて、初リリースから9年を数えるソフトです。ソースコードを一切書かずにWebサイトが丸々できる簡単さ、絵を描くように操作し、センスのよいサイトに仕上がるデザインの良さが人気です。2014年にはいよいよクラウド版が登場、今後は、ローカルソフトとクラウド版がどちらも同等機能で使えるように進化しました。
Webサイトを運営することによるビジネスの拡充や、チャンスの拡大には計り知れないものがあります。サイトは外注にしないとならないもの…と諦めず、ぜひ、楽しくWebサイト制作にとりくんでいただければと思います。
(本書の構成)
(目次)
Basicコース
Webデザインの基本を覚えよう
Webサイトが見えるしくみ
Webサイトのデータ構造
モバイル時代のWebサイトはこう違う
詰め込み型サイトからコンパクトなコンテンツへ
Webサイト制作の流れ
サイトの制作①構造を練る
サイトの制作②コンテンツの準備
サイトの制作③サイトの公開と更新
Drillコース
Webデザイン力をアップしよう
category:ページのレイアウト
Webページの横幅の設定
ページの分割とサイト構成
カラム数とレスポンシブデザイン
テンプレートの選択
写真の配置
デザインに広がりを感じさせる
category:文字の扱い
Webフォントの効用
見出しの表現
文字のバランスとジャンプ率
インターフェースとしての文字
category:ナビゲーションとリンク
ナビゲーションの位置とアニメーション
グローバルナビの役割
ナビゲーションの存在感
ナビゲーションの整理
クリックを促すリンクの設定
フラットデザインでも押したくなるボタン
スマートフォン向けのナビゲーション
category:写真とグラフィック
写真のスペース
好感度の高いスライドショー
コンテンツへのリンク
ビルボードのデザイン
PCでもスマホでもクリックしやすい画像
コンバージョンが上がるバナー
写真のトリミング
複数写真を並列に扱う
組み写真によるデザイン
人物写真の扱い
ピクトグラムやアイコン
背景写真の加工
シンボルマークとしてのファビコン
category:配色
読みやすい配色
食欲をそそる配色
ターゲットに合った配色
category:SEO、コピー
検索エンジンに登録するWebページ情報
新規客を獲得するためのコンテンツ
Web原稿の編集
長い文章の扱い
altの設定をする
フォームで情報を集める
Tutorialコース
BiNDでレスポンシブサイトを作ってみよう
テンプレートの選択
背景やカラーの設定
SiGNとSHiFTで作るロゴとビルボードのデザイン
ナビゲーションの設定
Webフォントによる見出し・本文の設定
SiGN Proで作るバナー
CSSテキストボタンの作成
スクリーンサイズに追従する画像幅の設定
フッタの作成
サイト名、ページタイトル、ディスクリプションの設定
レスポンシブの設定
フォームのデザイン
サイト公開の設定