『相原典佳(実用)』の電子書籍一覧

〈電子書籍版について〉
本書は固定レイアウト型の電子書籍です。リフロー型と異なりビューア機能が制限されるほか、端末によって見え方が異なります。

【読む＆作りながら、Figmaでデザインする「楽しさ」を知る！】

デザインツール「Figma」の基本的な使い方から実践的な活用ノウハウまでを解説した本の改訂版。

「初心者からちゃんとしたプロになる」シリーズは、制作現場で「一人前のプロ」として活躍するための知識や技術を提供するものです。

本書は、WebやUIのデザイナー、ディレクター、エンジニア、これらの職種を志望する方々など、Figmaを使う多くの方に最適な内容になっています。

改訂にあたって、「バリアブル」や新機能が追加された「オートレイアウト」の解説を加えるなど、内容の多くを刷新しました。

全6章構成で、Lesson1・2では、基礎的な知識や画面の見方を習得していただきます。

Lesson3では、アプリやWebサイトを試作できるプロトタイピング機能を紹介しています。

Lesson4では、作成したデータを共有し、コラボレーションして制作や開発を行うための知識を伝えます。

Lesson5～6では、それぞれアプリデザインとWebデザインを制作するノウハウを学びます。

本書を土台にして、個人やチームでのデザインワークに活用するとともに、Figmaでデザインする「楽しさ」を体感してください！

〈本書の特長〉
・1冊で、理論（読むパート）と実践（作るパート）の両方を習得できる
・記事ごとに学習時間の目安を設けており、学習教材としても利用しやすい
・第一線で活躍する現役のプロが、かみ砕いてわかりやすく解説している

〈こんな方にオススメ〉
・事業会社や制作会社のWebデザイナー／UIデザイナー
・基本から現場の一段深いノウハウまでを習得したい方
・制作職以外でも、チームでFigmaを操作する機会のある方

〈本書の章構成〉
■Lesson1　Figmaの基本とワークフロー
■Lesson2　基本操作とデザイン機能
■Lesson3　Figmaのプロトタイピング機能
■Lesson4　コミュニケーションのための機能
■Lesson5　モバイルアプリをデザインする
■Lesson6　Webサイトをデザインする

〈著者プロフィール〉
相原 典佳（あいはら・のりよし）
1984年群馬県生まれ。2006年よりDTP、Web制作に携わる。Webアシスタントディレクター業務を経たのち、2010年にフリーランスとして独立。また、デジタルハリウッドなどでWeb制作の講師としても活躍。デザインからフロントエンド構築まで、一貫したWebサイト制作を提供している。

沖 良矢（おき・よしや）
1981年愛媛県生まれ。インタラクションデザイナー。2003年よりWeb制作に携わる。2008年にフリーランスとして独立後、2019年に合同会社世路庵（せろあん）を設立。ビジネスとクリエイティブの両立を強みとして、戦略立案、UI/UX設計、デザイン、フロントエンド開発に携わる。現場で培った知見をもとに講演、執筆、コミュニティ運営にも取り組んでいる。長岡造形大学デザイン学科非常勤講師、WebクリエイティブコミュニティDIST代表、Vue.js-jpコアスタッフ。

岡部 千幸（おかべ・ちゆき）
GUIデザイナー／UXデザイナー。法政大学デザイン工学研究科システムデザイン専攻卒業後、事業会社に入社。既存サービスのグロース、ゲーム開発などを経験。2018年ベンチャー企業に入社後は、GUIデザインを軸足にプロジェクトの進行を支援。その後、独立。個人事業主として多くのプロダクト開発を経験後、株式会社cencoを設立。2022年より女子美術大学非常勤講師。

倉又 美樹（くらまた・みき）
1985年新潟県生まれ。Web／UI／DTPデザイナー。2014年にフリーランスとして独立。女子美術大学デザイン・工芸学科プロダクトデザイン専攻および横浜芸術高等専修学校非常勤講師。「駆け出しデザイナーを一人にしない」をミッションにするコミュニティ「まるみデザインファーム」を運営している。Adobe MAX 2021登壇。

【プロとして「独り立ち」するために、1日30分からはじめる！】

本書は、Webサイトをイチから作ることで、HTML+CSSの基本から応用までを習得していく教科書です。「1日30分からはじめる」をテーマに、Web制作にかかわる知識や技術を解説した「ちゃんとしたプロになる」シリーズの2冊目となります。

本書で学べることは、主に次の3つです。

1つめは、「いま」のWebデザインと現場での実制作の流れ。いま主流のレイアウトや表現手法、制作技術やツールといった、現場でプロとして活躍するためにベースとなる知識を習得できます。

2つめは、HTMLとCSSの基礎。HTML・CSSのごく初歩的な書き方から解説しており、本格的なソースコードを書くのは初めてという方にもわかりやすい内容になっています。

そして、3つめが実際にWebサイトを作るノウハウ。1つのHTMLファイルで完結するシンプルなWebページから、モバイルファーストで設計しFlexboxやCSS Gridといった流行りの手法を取り入れたものまで。タイプや難易度の異なる5つのサイトを作りながら、表現の幅を広げていきます。

本書を通じて、プロとして「独り立ち」するために礎となる力が身につくはずです。

〈こんな方にオススメ〉
・HTML+CSSを本格的に学んでみたい方
・Webデザイナーやマークアップエンジニアを目指す方
・Webサイトを自分の手で作り上げてみたい方

〈本書の特長〉
・作りながら覚えることで、学んだことをすぐに実践できる
・記事ごとに学習時間の目安を設けており、学習教材としても利用しやすい
・大学や専門学校で教えている現役の先生たちが、ていねいに解説している

〈本書の内容〉
■Lesson 1 Webデザインの“いま”
■Lesson 2 Webサイトを制作する準備
■Lesson 3 HTMLとCSSの基礎
■Lesson 4 HTMLとCSSの応用
■Lesson 5 シンプルなWebページを作る
■Lesson 6 シングルページのサイトを作る
■Lesson 7 Flexboxを使ったサイトを作る
■Lesson 8 CSS Gridを取り入れる
■Lesson 9 レスポンシブ対応サイトを作る

※この商品はタブレットなど大きいディスプレイを備えた端末で読むことに適しています。また、文字だけを拡大することや、文字列のハイライト、検索、辞書の参照、引用などの機能が使用できません。

前半ではFigmaの基本操作を学びます。UIコンポーネントとスタイルを集めた本書オリジナルのUIキット「Stockpile UI（ストックパイルユーアイ）」を元に、UIデザインで必須のコンポーネントやアイコンについて、その機能や目的を学びながらデザインしていきます。後半では本書オリジナルアプリに実装することで、一連の制作の流れを体験できる内容になっています。「いろいろなサンプルを一気に見たい」「とにかく早く実務に生かしたい」人に役立ちます。Chapter 1で利用する練習用のファイルと、本書オリジナルのUIキット「Stockpile UI」のデータをサンプルファイルとして使用することができます。

【1日30分からはじめる！ プロを目指す人の新・スタンダード。】

WebデザインやHTML・CSSの学習を「1日30分からはじめる」をテーマに、やさしくしっかり解説した書籍。初学者の方が、プロのWebデザイナーを目指す上で必要となる基本的な知識や技術を体系的に学べます。“ちゃんとしたプロ”のWebデザイナーとしてスタート地点に立つために、最初に選んでいただきたい1冊です。

Webサイトの実制作のフローに沿い、本書の解説では、Webデザインの概論と制作に必要となるツールや素材・配色について学んだあと、HTML・CSSの基礎と実践を習得し、サイトの公開や運用に関する知識を身につけます。HTML・CSSの書き方を初歩から教えるだけにとどまらず、サイトを制作し、公開・運用していくために必要な基本知識をすべて解説しています。

また、各記事ごとに学習時間の目安を記載しており、授業や独習で学習教材として活用しやすい作りを目指しました。HTML・CSSの実践部分でサンプルサイトとして制作するのは、シングルページのシンプルなお店のサイトと、モバイルファーストの手法を取り入れたサイトの2つです。サンプルは学習用データとしてダウンロード提供します。

〈こんな方にオススメ〉
・初学者からプロのWebデザイナーやマークアップエンジニアを目指す方
・Webデザイン制作やHTML・CSSの知識を身につけたい方
・WebデザインやHTML・CSSの基本情報をアップデートしたい方

〈本書の章構成〉
○Lesson1　Webサイトの成り立ち
○Lesson2　Webサイトの枠組みを知る
○Lesson3　Webデザインに必要な素材
○Lesson4　HTMLをマスターする
○Lesson5　CSSをマスターする
○Lesson6　シングルページのサイトを作る
○Lesson7　レスポンシブ対応サイトを作る
○Lesson8　Webサイトを公開してみよう
○Lesson9　SNS連携とWebサイトの運用

〈電子書籍版について〉
本書は固定レイアウト型の電子書籍です。リフロー型と異なりビューア機能が制限されるほか、端末によって見え方が異なります。

【Figmaを使うなら最初に読む本！ 基本から実践までしっかり解説】

インターフェイスデザインツール「Figma」の基本操作から制作現場での実践的な活用ノウハウまでを伝える本。
これからFigmaの学習をスタートする方や、Adobe XDと合わせてFigmaも本格的に使ってみたいという方に向け、しっかりとていねいに解説しています。

全7章構成で、前半部ではFigmaの特徴・基礎知識や画面構成を学んだあと、アプリやWebサイトを試作するためのプロトタイピング機能、作成したデータや制作過程そのものを共有するためのコミュニケーション機能を解説。
後半部では実践パートとして、Figmaを使ってWebサイトとモバイルアプリのUIをデザインしてみます。

Figmaはさまざまな職種のメンバーと「協業」しながら、チームでデザインを作り上げる過程で真価を発揮するツールです。
開発・制作の中心にFigmaを据えることで、自分だけでなくチーム全体のパフォーマンスも向上させることができます。

本書はデザイナーやディレクター、エンジニアはもちろん、制作職以外のFigmaを使う場面のある方々にも役立つ内容となっています。
学習の場や制作の現場で、ぜひご活用ください！

〈本書の特長〉
・1冊で、理論（読むパート）と実践（作るパート）の両方を習得できる
・記事ごとに学習時間の目安を設けており、学習教材としても利用しやすい
・第一線で活躍する現役のプロがかみ砕いてわかりやすく解説している

〈こんな方にオススメ〉
・事業会社や制作会社のWebデザイナー／UIデザイナー
・制作職以外でもFigmaを操作する機会のある方
・基本から現場の一段深いノウハウまでを習得したい方

〈本書の章構成〉
■Lesson1　Figmaの基本とワークフロー
■Lesson2　デザインするための機能
■Lesson3　Figmaのプロトタイピング機能
■Lesson4　コミュニケーションのための機能
■Lesson5　Webサイトをデザインする
■Lesson6　モバイルアプリをデザインする
■Lesson7　外部のデザインツールとの連携

〈プロフィール〉
相原 典佳（あいはら・のりよし）
1984年群馬県生まれ。2006年よりDTP、Web制作に携わる。Webアシスタントディレクター業務を経たのち、2010年にフリーランスとして独立。また、デジタルハリウッドなどでWeb制作の講師としても活躍。デザインからフロントエンド構築まで、一貫したWebサイト制作を提供している。

沖 良矢（おき・よしや）
1981年愛媛県生まれ。インタラクションデザイナー。2003年よりWeb制作に携わる。2008年にフリーランスとして独立後、2019年に合同会社世路庵（せろあん）を設立。ビジネスとクリエイティブの両立を強みとして、戦略立案、UI/UX設計、デザイン、フロントエンド開発に携わる。現場で培った知見をもとに講演、執筆、コミュニティ運営にも取り組んでいる。長岡造形大学デザイン学科非常勤講師、WebクリエイティブコミュニティDIST代表、Vue.js-jpコアスタッフ。

倉又 美樹（くらまた・みき）
1985年新潟県生まれ。Web／UI／DTPデザイナー。2014年にフリーランスとして独立。女子美術大学デザイン・工芸学科プロダクトデザイン専攻および横浜芸術高等専修学校非常勤講師。「駆け出しデザイナーを一人にしない」をミッションにするコミュニティ「まるみデザインファーム」を運営している。Adobe MAX 2021登壇。

岡部 千幸（おかべ・ちゆき）
GUIデザイナー／UXデザイナー。法政大学デザイン工学研究科システムデザイン専攻卒業後、事業会社に入社。既存サービスのグロース、ゲーム開発などを経験。2018年ベンチャー企業に入社後は、GUIデザインを軸足にプロジェクトの進行を支援。その後、独立。個人事業主として多くのプロダクト開発を経験後、株式会社cencoを設立。2022年より女子美術大学非常勤講師。

〈電子書籍版に関する注意事項〉
本書は固定レイアウト型の電子書籍です。リフロー型と異なりビューア機能が制限されるほか、端末によって見え方が異なりますので、ご購入前にお使いの端末にて「無料サンプル」をお試しください。

【制作フェーズに応じたプロの使い方がわかる！ Adobe XDの入門書】

Webサイトやモバイルアプリの分野で広く使われてるデザイン・プロトタイピングツールであるAdobe XDの入門書。

制作現場でXDを「初めて使うこと」を想定し、XDの画面構成や基本操作からプロの実践的な使い方までを、6章構成で解説したものです。

XDの特徴は、デザイン制作の機能だけでなく、プロトタイピング機能や共有機能が一体となっている点です。その特定性が十分に発揮されるのが、チームで協力し合いながらプロジェクトを進めていく場面。

そのため、本書では、ディレクター、デザイナー、エンジニア、それぞれの立場でのXDの使い方、チームでの連携という切り口で解説しています。

1・2章で基本的な知識や画面の見方を学んだあと、3・4・5章ではお弁当の販売サイトを題材に、ワイヤーフレーム作成（ディレクター）、デザイン作成（デザイナー）、コーディング（エンジニア）の実践演習を進めて行く流れになっています。

分業化が進む現在の制作現場では、チームでのコラボレーションが必須なだけでなく、自分の「お隣さん」の仕事を理解しておく必要があります。

そうした場面でAdobe XDを中心に据えた制作・開発の“お供”になる1冊です。


〈本書の特長〉
・1冊で、理論（読むパート）と実践（作るパート）の両方を習得できる
・記事ごとに学習時間の目安を設けており、学習教材としても利用しやすい
・第一線で活躍する現役のプロがかみ砕いてわかりやすく解説している

〈こんな方にオススメ〉
・Adobe XDを初めて操作する方
・制作フローと連携させた活用法を知りたい方
・制作現場の一段深いノウハウを習得したい方

〈本書の内容〉
■Lesson1　制作のワークフローとAdobe XD
■Lesson2　Adobe XDの基本
■Lesson3　ディレクター視点で使う
■Lesson4　デザイナー視点で使う
■Lesson5　エンジニア視点で使う
■Lesson6　さらに便利な機能＆知識

【1日30分からはじめる！ 制作現場の実践的コーティング】

本書は、HTML・CSSの基本をひと通り身につけた方を主な対象に、制作現場でプロとして活躍するために必要なWebコーディングの技術を解説したものです。

HTML・CSSのコーディング初心者を脱して間もないレベルと、制作現場の第一線で活躍できる技術レベルの間には、当然ですが大きなギャップがあります。本書は、このギャップを少しでも埋められるような内容を目指しました。

全7章構成の前半では、テキストエディターの設定、Node.jsやGulp、バージョン管理システムの導入といった効率的な開発環境を構築・整備する方法とともに、フロントエンド技術周辺の必要知識を解説。より効率的にコーディングするための環境を整えていきます。

後半では、デザインカンプやWebサイトを題材に、現場の実践的なコーディングを学んでいきます。Webページのレイアウトを「コンポーネント」単位で捉える視点を身につけ、事前のマークアップ設計やCSS設計を行った上でコーディングを進めるノウハウを習得できます。解説及びサンプルには、BEMやSass（SCSS記法）、初歩的なVue.jsを取り入れました。

〈こんな方にオススメ〉
・制作現場のプロで活躍するコーディング技術を学びたい方
・HTML・CSSの基本を習得したあと、ステップアップしたい方
・フロンエンドの開発環境に関する知識を身につけたい方

〈本書の特長〉
・1冊で、理論（読むパート）と実践（作るパート）の両方を習得できる
・記事ごとに学習時間の目安を設けており、学習教材としても利用しやすい
・作りながら覚えることで、学んだことをすぐに実践できる

〈本書の内容〉
■Lesson 1　現場のコーディングとツール
■Lesson 2　フロントエンド技術の“いま”
■Lesson 3　開発環境の構築
■Lesson 4　カンプからのコーディング設計
■Lesson 5　BEMを使ったCSS設計
■Lesson 6　Sass（SCSS）を取り入れる
■Lesson 7　Vue.jsを取り入れる