ドリル式のWebデザイン教本を発売しました

8月12日、マイナビ出版より、「ドリル式 やさしくはじめる Webデザインの学校 〜講義+BiNDを使ったチュートリアルによる短期マスターコース」を発売しました。
アマゾンから購入
楽天ブックスから購入
ドリル式 やさしくはじめる Webデザインの学校

(前書きより)


 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サイト制作にとりくんでいただければと思います。


(本書の構成)


0043


0044


0045


(目次)

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テキストボタンの作成 スクリーンサイズに追従する画像幅の設定 フッタの作成 サイト名、ページタイトル、ディスクリプションの設定 レスポンシブの設定 フォームのデザイン サイト公開の設定