SNSで大人気！ 上司のいないデザイナーのためのオンライン上司・上司ニシグチが 新米デザイナーの作品を赤ペン添削します。 クライアントの意図を読み解くアドバイスやデザイン的な改善ポイントを、 上司と部下の会話でわかりやすく解説。 頼りになる上司がいれば、 あなたのデザイン力もぐんぐん伸びること、間違いなしです！

コンセプト編

「ものづくりの視点」に帰って 人の心を動した、三ツ星ポートフォリオ拝見 人の心を動す三ツ星ポートフォリオ企画「基本編」 人の心を動かす三ツ星ポートフォリオ企画「実践編」 人の心を動かす三ツ星ポートフォリオ企画「文章編」 人の心を動かす三ツ星ポートフォリオ企画「知識編」

フレキシブルボックスレイアウトを使ったレスポンシブWebデザインの本格的レイアウトテクニックを習得！ 本書は、マルチデバイスに対応したWebサイトをステップ・バイ・ステップで作成し、最新標準のHTML+CSSをマスターすることを目的とした書籍です。 Webページ制作を取り巻く環境は、ここ数年で大きく変化しています。 スマートフォンやタブレットといったモバイルデバイスからのアクセスがPCを凌駕し、それとともにWebページのデザインも１段組みをベースとしたシンプルなものが求められるようになっています。 そこで、本書では古いブラウザに縛られた時代には使い切ることができなかった機能をふんだんに活用し、今どきのWebページをシンプルなステップで形にしていく方法をまとめました。 サンプルサイトの制作工程を6ステップに分け、 CHAPTER1　下準備 CHAPTER2　トップページの作成 - コンテンツ編 CHAPTER3　トップページの作成 - ナビゲーション編 CHAPTER4　コンテンツページの作成 CHAPTER5　記事一覧ページの作成 CHAPTER6　アレンジ と順に進めていくことで、基本からアレンジの方法まで、効率よくマスターできるカリキュラムとなっています。 本書サポートサイトから学習用のファイルをダウンロードできますので、それを使って学習することができます。 「HTML5は2014年に正式勧告がリリースされ、２年が経とうとしていますが、まもなくHTML5.1の勧告もリリースされる予定です。CSSはさまざまな機能がCSS3やCSS4の規格として採り入れられ、策定作業が進められています。 同時に、OSレベルでのサポートの打ち切りなどにより、ブラウザの世代交代も強制的に進んでおり、主要ブラウザは最新のHTML+CSSをフルにサポートした状態になっています。 こうした現状をあらためてみると、 そろそろHTML5+CSS3の真価を発揮させてもいい時期 になったのではないでしょうか。」（著者「はじめに」より） 巻末にはHTMLとCSSのリファレンスも用意し、学習中に適宜参照できるようになっています。 これからWebページ制作を学びはじめる方にも、最新のHTML+CSSに興味がある方にも、これからのWebページ制作に求められるスキルやテクニックをまとめた１冊として、役立てていただければ幸いです。 CHAPTER1　下準備 1-1　１段組みをベースとしたページを最新のHTML/CSSで作成する 　　1-1-1　１段組みをベースとしたWeb ページとは 　　　　レスポンシブWeb デザイン 　　　　セマンティクス 　　1-1-2　最新のHTML/CSS 　　　　古いブラウザのサポートについて 1-2　構築するページとサイト 　　1-2-1　Webサイトの構造 　　1-2-2　ページの構造と作成手順 　　1-2-3　ページの配色 1-3　Webページのベースを用意する 　　1-3-1　HTMLファイルに記述する設定 　　1-3-2　CSSファイルに記述する設定 　　　　HTML/CSSの編集に使用するテキストエディタ 　　　　ページの表示確認に使用するブラウザ 　　　　さまざまな画面サイズでの表示を簡単に確認する方法 CHAPTER2　トップページの作成　-　コンテンツ編 2-1　ヒーローイメージ 　　2-1-1　画像に重ねるテキストを表示する 　　2-1-2　Webフォントで表示して字間を調整する 　　2-1-3　ブラウザ画面いっぱいに画像を表示する 　　2-1-4　SVGでロゴ画像を表示する 　　2-1-5　リンクボタンを表示する 2-2　概要（アイコン＋テキスト） 　　2-2-1　概要のテキストを表示する 　　2-2-2　アイコンを表示する 　　2-2-3　３つの概要を横に並べる 2-3　概要（画像＋テキスト） 　　2-3-1　画像とテキストを表示する 　　2-3-2　画像とテキストを横に並べてレイアウトする 2-4　概要（画像＋テキスト：逆配置） 　　2-4-1　コンテンツCをベースに新しいブロックを作成する 　　2-4-2　画像の横幅を固定して並び順を変更する CHAPTER3　トップページの作成　-　ナビゲーション編 3-1　サイト情報 　　3-1-1　サイト情報を表示する 　　3-1-2　フッターのデザインを指定する 3-2　フッターメニュー 　　3-2-1　フッターメニューを作成する 　　3-2-2　３つのメニューを横に並べる 3-3　コピーライト 　　3-3-1　コピーライトを表示する 　　3-3-2　フッター内のパーツのレイアウトを調整する 3-4　SNSメニュー 　　3-4-1　SNSメニューを表示する 　　3-4-2　SNSメニューのデザインを指定する 3-5　ヘッダーのサイト名 3-6　ナビゲーションメニュー 　　3-6-1　ナビゲーションメニューを作成する 　　3-6-2　大きい画面ではナビゲーションメニューを横に並べる 3-7　トグルボタン 　　3-7-1　トグルボタンを作成する 　　3-7-2　トグルボタンでナビゲーションメニューを開閉する CHAPTER4　コンテンツページの作成 4-1コンテンツページ 　　4-1-1　コンテンツページを作成する 　　4-1-2　記事のデザインを指定する 　　4-1-3　パンくずリストを表示する 4-2アバウトページ 　　4-2-1　アバウトページを作成する 　　4-2-2　画像と沿革を表示する 4-3お問い合わせページ 　　4-3-1　お問い合わせページを作成する 　　4-3-2　地図を表示する CHAPTER5　記事一覧ページの作成 5-1　カード型（画像＋テキストを上下に配置） 　　5-1-1　記事一覧Aのページを作成する 　　5-1-2　記事の概要を表示する 　　5-1-3　ブラウザ画面の横幅に応じて概要を横に並べて表示する 5-2　カード型（画像＋テキストを左右に配置） 5-3　サムネイル型（画像＋テキストを重ねて配置） CHAPTER6　アレンジ 6-1　ヘッダーの色をアレンジする 6-2　ヘッダーとヒーローイメージを一体化したデザインにする 6-3　ヘッダーを画面上部に固定する 6-4　関連記事メニューを追加する 6-5　メタデータを記述する 6-6　ページの基本色をアレンジする APPENDIX HTMLリファレンス 　　HTMLの基本文法 　　HTMLの基本設定 　　メタデータ 　　セクション 　　コンテンツ CSSリファレンス 　　CSSの基本文法 　　セレクタ 　　メディアクエリ ボックスモデル 　　ボックスの基本設定 　　ボックスの種類 　　フレキシブルボックスレイアウト 　　ポジションレイアウト 　　ボックス内のコンテンツのデザイン 　　単位 　　色の値 　　変数 最適化 主要デバイスの画面サイズ 古いブラウザ用の設定

ロゴ&マークのつくり方。 : 大黒大悟/梅原真/木下謙一/青木克憲/秋山具義/山野英之/山﨑晴太郎/小杉幸一/木住野彰悟/川上恵莉子/水野学/村上要×佐藤可士和ほか

Webデザインの作業フェーズ・業務シーンごとに、 「Adobe Photoshop」と「Adobe Illustrator」の 便利な使いこなし方やノウハウを解説する本です。 Webにまつわるビジュアルをより魅力的なものにするために、 あるいはWeb制作を効率的に行うために必要となるテクニックを 目的に沿って作例を用いながら解説します。 Webデザイン初心者、Webデザインに活動範囲を 広げたいと考えているグラフィックデザイナーはもちろん、 簡単な素材の制作や写真加工を行う必要があるプログラマーや コーダーにとっても有益な内容です。 Adobe Creative Cloud 2020/2019対応。 ※教材データはインターネットからダウンロードする必要があります。 【CONTENTS】 ●CHAPTER 1 Webデザイン+Photoshop+Illustratorの基礎知識 印刷物のデザインとは違ったセオリーやルールなど、 Webデザインの基礎知識について解説! ●CHAPTER 2 ワイヤーフレーム制作で使えるテクニック Webページに要素をどう配置するのかを表した大枠(ラフレイアウト)である 「ワイヤーフレーム」制作の際に役立つテクニックについて解説! ●CHAPTER 3 画像処理に使えるテクニック 印刷物のデザイン時にも活用できる基本的な画像の補正や加工から、 Webの機能を盛り込んだ表現まで幅広く解説! ●CHAPTER 4 パーツ制作で使えるテクニック アイコンやロゴ、囲み罫、背景パターン、バナーといった Webページを構成するパーツを効率よく制作する方法を解説! ●CHAPTER 5 カンプ制作で使えるテクニック 補正や加工を施した画像や、作成したパーツを組み合わせて デザインカンプとして仕上げる際に必要なテクニックを解説! ●CHAPTER 6 コーディン向けに使えるテクニック 編集・作成した画像、パーツ、デザインカンプなどをWebページに適した形式や、 コーディングに適した状態で書き出す際のテクニックについて解説!

絶対フォント感を身につける。 : 総合編・明朝体編にゴシック体編を追加した決定版!

学生やWebデザイナー向けのjQuery入門書。難度順の全30レッスンで、さまざまな動作サンプルを作りながら学べる構成。 作って身につく・仕組みがわかる30レッスン！ 本書は、HTMLとCSSの知識はあってもJavaScriptやjQueryには触れたことがない初心者を対象にした、Web制作向けのjQuery学習書です。全30LESSONを通して、jQueryの基礎知識と基本文法の学習から始めて、実際に動作サンプルを作りながら、jQueryのしくみと使い方を学んでいきます。 各LESSONは、考え方や設計を説明する「講義」と、実際にコードを書いて作っていく「実習」で構成。メニューやナビゲーション、UIパーツなど、Webサイトでよく使われているサンプル作例を自分で作りながら、「使える」知識がきちんと身につきます。 サンプル作例は小さなパーツから始めて、少しずつ複合的なパーツを作っていく難度順なので、プログラミングになじみのない初心者でも挫折せずに進められます。Web制作者を目指す人や、スキルアップしたいWebデザイナーのためのjQuery教科書としておすすめの1冊です！ Introduction レッスンを始める前に Chapter01 jQueryの基礎知識 LESSON01 jQueryの概要 LESSON02 jQueryの導入 Chapter 02 jQueryの文法 LESSON03 jQueryの文法 LESSON04 JavaScriptの基本 Chapter 03 jQueryのサンプル制作：Level 1 LESSON05 トグルメニュー LESSON06 アラートボックス LESSON07 ビューアー LESSON08 タブ Chapter 04 jQueryのサンプル制作：Level 2 LESSON09 ドロップダウンメニュー LESSON10 フローティングメニュー LESSON11 lightBox風モーダルウインドウ LESSON12 画像のキャプション表示 LESSON13 ツールチップ Chapter 05 jQueryのサンプル制作：Level 3 LESSON14 ボックスの高さを合わせる LESSON15 文字サイズの変更 LESSON16 パララックス効果 LESSON17 フィルタリング LESSON18 テーブルセルのハイライト LESSON19 アコーディオンパネル LESSON20 スムーススクロール Chapter 06 jQueryのサンプル制作：Level 4 LESSON21 バナーのランダム表示 LESSON22 フォームのバリデーション LESSON23 スライドメニュー LESSON24 スクロールによるヘッダーのリサイズ LESSON25 ブラウザ上部に固定されるヘッダー LESSON26 メニューのハイライト Chapter 07 jQueryのサンプル制作：Level 5 LESSON27 スライドショー（横スクロール） LESSON28 スライドショー（フェードイン／アウト） LESSON29 画像のズーム LESSON30 カウントアップゲーム ［補講］ プラグインの利用 索引