※この授業の受講には「Adobe Illustrator CS6」もしくは「Illustrator CC」が必要です。 インストールされたPCをご用意いただくか、下記URLから無料体験版をインストールしてください。 https://creative.adobe.com/products/illustrator 趣味の活動をしているとき、Webサイトやブログはもちろん、Tシャツや活動を記録した冊子など作りたいけど困ることはありませんか？ 個人用の名刺なんかもあるとイベントに行ったときなど話もはずむし、なにより楽しいですよね。 名刺というのはあんな小さいサイズながら、デザインのノウハウが詰まった小宇宙です。 「デザイン」とは、とても広いものですが、ざっくり分類すると「使うためのデザイン」「伝えるためのデザイン」「装飾のためだけのデザイン」などがあります。 まずは入口としてソフトの使い方から入り

自分の仕事やお店の玄関口となるサイトが欲しいと思った事はありませんか？ でも難しいコーディングはちょっと…どころじゃなく苦手。 この授業ではNOコーディングでWordPressを使って基本的かつ汎用的に使えるポートフォリオサイトを作っていきますので、コーディングが苦手でも安心の授業内容となっています。 ターゲットは個人商店や個人のデザイナーやイラストレーター、他にも自分のスキルの玄関口が欲しいと思った方。 ポートフォリオサイトとは自分のプロフィールや情報を掲載して、仕事やお店の玄関口となるサイト。 この授業では自分のスキルや伝えたい事をまとめ、ポートフォリオサイトに必要なものや構造をさくっとさらっと理解する事からはじめます。 ポートフォリオサイトを作るという事は自己分析を元に自分の営業ツールを作る事です。 この授業を受けると営業ツールであるポートフォリオサイトを作る以外に、自分のスキルや伝

スマートフォン、タブレットなどのスマートデバイスの爆発的な普及により、Webサイトのマルチデバイス対応が求められてます。そのひとつの手法としてレスポンシブWebデザインが注目されています。 この授業では、レスポンシブWebデザインの概要と、注目されている理由、その基本的な実装方法について話します。また実際にハンズオンで簡単なレスポンシブWebデザインのサイトを制作します。実際に手を動かして制作することでより理解が深まります。 レスポンシブWebデザインは比較的新しい手法であり、またレイアウトが可変で複数のデバイスに対応するため、今までのサイト制作とは大きく考え方や制作のフローを変える必要があります。またデバイスの画面サイズや回線速度などの違いを様々な技術を組み合わせて補う工夫をする必要もあります。 このように学ぶことは多岐に渡りますが、まずは入り口として基本的な部分を学んでレスポンシブWe

色調補正は奥が深くとても難しいものだと思われています。 本授業ではその色調補正の基本と写真を美しく仕上げられるテクニックを90分で学んでいただきます。 本来、色調補正とは画像の［明るさやコントラスト］、［色合い］、［鮮やかさ］などを調整するだけの作業で決して特別な技能が必要な訳ではありません。 そのため、色調補正の全体像を学び、必要な手順とPhotoshopの機能を覚えていただければ経験の少ない方でも自分なりの色を出すことができるのです。 今回は［色の理論］、［3つの基本的な機能］、［レイヤーを使った応用］の3つをテーマに授業を進めます。 まず、色の理論は難しいものではなく、［色相］［彩度］［明度］などのもっとも基本的なことです。 次に3つの基本的な色調補正の機能としてPhotoshopの［トーンカーブ］と［色相・彩度］、写真をモノクロにするために［チャンネルミキサー］の3つだけを使用して

自分の仕事やお店の玄関口となるサイトが欲しいと思った事はありませんか？ でも難しいコーディングはちょっと…どころじゃなく苦手。 この授業ではNOコーディングでWordPressを使って基本的かつ汎用的に使えるポートフォリオサイトを作っていきますので、コーディングが苦手でも安心の授業内容となっています。 ターゲットは個人商店や個人のデザイナーやイラストレーター、他にも自分のスキルの玄関口が欲しいと思った方。 ポートフォリオサイトとは自分のプロフィールや情報を掲載して、仕事やお店の玄関口となるサイト。 この授業では自分のスキルや伝えたい事をまとめ、ポートフォリオサイトに必要なものや構造をさくっとさらっと理解する事からはじめます。 ポートフォリオサイトを作るという事は自己分析を元に自分の営業ツールを作る事です。 この授業を受けると営業ツールであるポートフォリオサイトを作る以外に、自分のスキルや伝

Webデザインのみならずさまざまなクリエイティブワークで必須のアプリとして不動の地位を確立しているPhotoshopですが、そのあまりにも高機能・多機能な振る舞いに、なんとなく使っているという方も多いのではないでしょうか？ 今回の授業では、作業をより効率化し時間短縮につながるポイントを、実際のワークフローに沿ったかたちで進めていきます。 たとえば、制作をはじめる前の環境設定一つとってみても、掘り下げるべきポイントがあります。 まずは、Webデザインに適した設定を行ってから。そこからが今回の授業のスタートです！ 次にページのフォーマットづくり。ここではいろんなガイド機能を利用します。 そして、実際のデザインワークではブラシやマスクの活用、グラフィックパーツの使い回しなど。 デザインが終わればいよいよ画像の書き出しです。こちらもいろんな機能やツールを使った方法を見てみましょう。 また、Phot

WordPressは、テーマを自由に作ることができるのが魅力です。 しかし、PHPに不慣れだと、なにから手をつけたらよいのか分かりにくい部分も。 この講座では、インストール直後の WordPressからスタートしてリアルタイムで、 企業サイトを構築、サーバーへの公開までの作業を紹介していきます。 ご参加者の質問やリクエストで、作る内容をその場で変えることも？ たくさんのご質問をお待ちしております。 たにぐち まこと 株式会社エイチツーオー・スペース 代表取締役 「ちゃんとWeb」をコーポレートテーマに、Web標準に準拠したメンテナンスしやすいWebサイトを「ちゃんと」作ることを目指したWeb制作会社。 WordPressを利用したサイト制作や、スマートデバイス向けサイトの制作、PHPやJavaScriptによる開発を得意とする。 また、CSS Niteや Word Campでの講演や著書な

WordPressを使ってサイト構築してみたいけど、超初心者だからなにから手をつけていいかわからない。 そんな方のために、「WordPressの教科書2」を使って、授業に参加する皆さんが開発環境の構築と、 サイトの実制作を一緒にやりましょう。関係各位の協力のもと、書籍の一部 を事前課題として公開しています。 WordPressの概要を全く分かっていないという方は、以前の授業「WordPressとは何か？を基礎の基礎から理解する」を受講しておくことをオススメします。 全２回（第１回：開発環境構築編,第２回：実制作編）の授業を通して、サンプルブログサイトの制作を一緒に体験し、制作スキルを取得することが可能です。 ※同授業で制作するサイトは、「WordPressの教科書2」で制作する「ジャカルタで働く社長のブログ」を簡易にしたものになります。オリジナルのものですので、そのまま 個人・法人問わず、

WordPressを使ってサイト構築してみたいけど、超初心者だからなにから手をつけていいかわからない。 そんな方のために、「WordPressの教科書2」を使って、授業に参加する皆さんが開発環境の構築と、 サイトの実制作を一緒にやりましょう。関係各位の協力のもと、書籍の一部 を事前課題として公開しています。 WordPressの概要を全く分かっていないという方は、以前の授業「WordPressとは何か？を基礎の基礎から理解する」を受講しておくことをオススメします。 全２回（第１回：開発環境構築編,第２回：実制作編）の授業を通して、サンプルブログサイトの制作を一緒に体験し、制作スキルを取得することが可能です。 同授業では「WordPressの教科書2」で採用している開発環境と同じものを利用します。 これらは、学習用途であれば「無料」で使え、「市場シェア」が一定以上あり、「日本語対応」があると

「黒い画面」ときいただけでアレルギー反応が出る人はいませんか？ Macで作業をする人が増えていることもあり、なにかと「黒い画面」で作業するようなことが増えてますが、それでも苦手意識を感じている人は多いと思います。 最近では、エンジニアだけでなくデザイナーやコーダーもGitなどのバージョン管理を使うようになりました。そのほかにも「黒い画面」からしか使えないような便利ツールもどんどんと増えてきています。 私自身が「黒い画面」に初めて触れたのは新卒で就職した会社が初めてでした。 もともと知っていたわけではなく、仕事の中で四苦八苦しながら覚えていったことを記憶しています。 最初はよくわからなかったコマンドも、ちょっとしたコツをつかんでからは理解が深まり親しみがわいてきました。 現在では一日の多くの時間を「黒い画面」の上で過ごしています。 この授業では、これまでに実務のなかで学んできた「黒い画面」と

現在、Web のフロントにおけるインタラクティブな動きのほとんどは JavaScript で実装されています。 例えばちょっとしたマウスオーバーのアクションや、カルーセル、モーダルウィンドウなど、皆さんが普段目にするほとんどの動的なエフェクトは JavaScript です。 一般化した JavaScript によって、 JavaScript を使いこなせるエンジニアの需要は高まる一方ですが、プログラミングの経験が無い人には少しむずかしいですよね。 しかし、今回お話する jQuery というフレームワークを利用すれば、まるでCSSを書くようにシンプルな記述方法で、パワフルなJavaScriptの機能を利用できるようになります。 この講座を受ければ、jQuery の基本的なエフェクトや構文などが理解できるようになっています。 これから jQuery を覚える人の一助になれば幸いです！

授業目的：Photoshop・Illustratorのコンビネーションを学ぶ WebデザインにおけるAdobe Photoshop & Illustratorは、 ビジュアルを作るアプリケーションの定番となっています。 それぞれのアプリケーションには得手不得手があり、 お互いを補うことで効率アップと表現の幅を深めることが可能です。 この授業では、カフェのWebサイトのデザインを題材にして、 Webデザインの制作フローと、アプリケーションのTIPSをご紹介します。 Adobeのアプリケーションは最初のハードルが高い印象があるようですが、 「この表現のためにどんな機能が必要か」という視点で授業を進めてまいります。 これからアプリケーションに触れる方にとっても、 Photoshop & Illustratorの魅力が伝わればと思います。

Webページは写真やロゴなどの「ビジュアル」と、HTMLやCSSといった「コード」で成り立っています。 この授業では、カフェ店舗のWebサイトをテーマにして下記の流れで進めていきます。 １．サイトの目的を考える ２．ビジュアルとコードを見つめる ２．ビジュアルイメージを練る ３．レイアウトを構成する ４．HTMLを設計する ５．CSSで飾る ６．Javascriptで演出する ※写真・テキストなどの原稿はダウンロードいただけるよう、ご用意します ブログやfacebookなど、既に出来上がっているWebを活用するのも楽しいことですが、まっさらな状態から制作することでWebへの理解が深まり、Webをつくる喜びを感じられるはずです。 Web業界は常に過渡期の連続ですが、変わらない技術と考え方が存在します。 それは試行錯誤する能力であり、スポーツ選手にとっての体幹です。 これらが身につけば、新しい

色って身近に存在しているわりには扱いが難しいですよね。 みなさんは日常の業務の中で資料を作成しなければならない場面が多くあると思いますが、その際の資料作成にはほとんどの方がパソコンを使っていると思います。 今時のパソコンで資料を作成するとなれば、オフィスソフトを使い文字や図形、写真も自由に配置ができます。 それらを駆使して配置した図形や文字が全部白黒だとやはり味気ないのでカラーパレットなどで色をつけますよね。 でも、できあがった配色はイマイチ……。こんな経験ありませんか？ なんで色をパレットからただ選ぶのは簡単なのに、それをまとまったひとつの資料にしようとすると中々まとまらなくて難しいのか。 自分で見てもイマイチなのが理解できるのに、だからといってその解決方法の糸口が全くつかめないのか。それには理由があります。 その理屈すべてを理解するのはとても難しい事ですが、複雑な知識を身につけなくても

ライターの村上です、皆さんこんにちは。 PowerPointは操作がとっても簡単なので、WordやExcelに比べると研修時間が短くて済み「なんだこんなの簡単じゃん」とあまり練習していただけないのが実状なのですが、プレゼンテーション自体は数をこなさないとうまくなりませんぜ旦那！ プレゼンの本番は発表でしょ！ さぁ、1週間後のそのプレゼン、たった1回の作成経験で本当に大丈夫ですか？ というわけでパワポ資料作成テクニックでご飯を食べてきたプロが、ブラッシュアップテクをご紹介いたします！ プロが教えるパワポ資料作成【3つのコツ】 1. 一枚のシートに詰込まない！伝えたいことは1つに絞る 自分が大好きな商品だったり、思い入れのある企画だったりするとあれもこれもそれも全部全部伝えたい！　その思いがスライドに溢れかえって逆効果に……。 ポイント：スライドは贅沢に使おう！ お客様が1つずつ理解できるよう

『10倍ラクするIllustrator仕事術』の執筆に際し、杏珠さんから教わったネタをこっそりと。 たとえば、次のような地図を完成させたい場合を考えてみてください。 まずは、こんな感じで完成サイズから道路などをはみ出すように地図を描きますよね。 さくっと全部選んでクリッピングマスクを設定してもいいのですが、再編集のときに面倒くさいですし、何よりせっかく分けたレイヤーがひとつに統合されてしまいます。 そこで、ひとつ上のレイヤーにこんな感じで穴の空いたオブジェクトをかぶせたりしていました（わかりやすく緑色にしていますが、実際は紙色）。ちなみに、私は「疑似マスク」と呼んでいます。 これはこれで間違ってはいないんですが、もっとスマートなのが「レイヤーのクリッピングマスク」を使う方法。 たとえば「道路」レイヤーをマスクしたいときには、マスクしたい図形（ここでは緑色のオブジェクト）をレイヤーの最前面に

新連載第一回のデジタルレシピは、「Evernote」に情報をたくさん集約するためのハウツーについて書きました（Evernoteを“人生の収納スペース”にしてしまう究極のレシピ）。今回はもう少し、具体例をあげながら説明しましょう。 Evernoteに情報を集約して、第2の脳として使えば便利だということはお分かりいただけたと思います。繰り返しになりますが、Evernoteではプレミアム会員になると、Wordなどのオフィス文書やPDF文書の中まで検索の対象になるので、より情報をピックアップしやすいのがレシピ上のポイントだと言いました。 Evernoteに情報をインプットし、それを欲しいときに引き出したいのなら、検索に利用できる「テキストをとにかく埋め込む」。これに尽きます。本文でも、タイトルでも、タグでも。とにかく文章をテキスト化してノートのどこかへ置いておきましょう。確かにタグで整理するのも一

今回から、わたくし花岡貴子の連載は「コスパ重視☆花岡貴子のデジタルレシピ」として模様替えしました。わたしは料理が好きなので、このコラムではスマートフォンやiPhone、タブレットなどのデジタルガジェット、パソコン、サービスなどを材料に見立て、それらを組み合わせて上手に調理する“デジタルレシピ”としてお届けしていきます。具体的な手順やノウハウをわかりやすく書いていきますので、末長くお付き合いくださいませ。 さて、初回はもはやわたしの生活、いえ人生に欠かせなくなった「Evernote」についてのレシピです。EvernoteはiOSやAndroidのアプリマーケットで“仕事効率化”というジャンルに分類されています。「どんなことができるの？」と聞かれたら、クラウドにメモが保存できるアプリと答えるのが一般的でしょう。しかし、この一見分かりやすい“プロフィール”が、かえってEvernoteユーザーの間

Web制作ツールといえばAdobeのPhotoshopやFireworksですが、AdobeはFireworksの開発停止を発表してしまいましたね。そんな最中、海外のWeb/ UIデザイナーたちが使い始めている新しいWeb制作ツールを見つけました。それがSketchです。BOHEMIAN CODINGという会社がリリースしているアプリで、他にも有名なフォント管理アプリFontcaseもリリースしています。 （Sketchを使い始めている海外のデザイナーたち→「Sketch App vs Photoshop」、Dribbbleにsketchで描いた作品をアップしている人も→[.Sketch] Wireframe UI kit） アイコンやWebサイトのデザインもきれいで、Goodpatch社内でも最も話題になっているアプリ。Sketchも使ってみようと盛り上がっています。ただSketchにつ