10/13(Sun)

今日の生放送

いしじま みき

イシジマ ミキ

デザイナー

デザイナー& 認定スクラムマスター(CSM)。N予備校 グラフィックデザインカリキュラム 作成&講師。エンジニア組織にて一人目デザイナーを代行し、グラフィックデザインからアプリデザインまで幅広く行う。デザイナー1人目特有のカオスな環境が好き。Figmaへの移行、デザインシステム構築が得意。 著書: デザインの学校 これからはじめるIllustratorの本 スマートフォンデザインでラクするために 神速Photoshop [グラフィックデザイン編] 神速Photoshop [Webデザイン編]

イシジマ ミキ

登壇している授業のカテゴリー・関連タグ

担当のコース

■バナー制作習得はWebデザイナーへの第一歩! デザイナー候補としてWeb制作会社に就職しても、いきなりサイトのデザインを任される事はありません!バナー制作が一人前になって初めてTOP画像や、ページのカンプ制作をまかされるようになります。しかしながら、小さな世界に飛び先の内容を凝縮する仕事ですから、実は大きなトップ画像をつくったり、ランディングページのグラフィックを作るよりむしろテクニックのいる仕事なのです。この授業では、小さな世界「バナー」で飛び先のページ全てを表現するテクニックを学びます。 ■バナーの種類 サイトの中でクリックをうながすために設置される場合と、別のサイトに貼ってもらって、本家サイトに誘致するための物があります。それぞれの場合の情報の選びかたを学びます。 ■バナー広告とは 別のサイトに張って、サイトに誘導する物です。色々な種類のバナー広告の仕組みやWeb広告のASP(アフィリエイトサービスプロバイダ)について学びます。バナー広告は広告の宿命で、嫌われ者になりやすいのです。ウザがられず、目に飛び込み、そして押してもらうためのテクニックを学びます。 ■バナーのサイズは決まっている! バナー広告の出稿先によって、サイズが決まっています。一つのとび先に向うバナーは通常いくつかのサイズを制作します。それぞれのサイズのバナーの重さが決まっていますので、その重さの中でいかに画像を劣化させないで制作するかがポイントになってきます。 ■受講にあたって準備するもの adobe Photoshop (ヴァージョンは問いません) ・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロードしてください。 https://creative.adobe.com/ja/products/download/photoshop ・WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。 ・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見てPhotoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。 https://helpx.adobe.com/jp/photoshop.html ■バナー甲子園:関連授業一覧 ・PhotoshopでWebデザインするときの悩みに答えます ・バナーからはじめるクライアントワーク vol1 ・バナーからはじめるクライアントワーク vol2 ・クリックされるバナーをデザインする実践テクニック vol1 ・クリックされるバナーをデザインする実践テクニック vol2 ※バナー甲子園の案件はこちら http://crowdworks.jp/public/jobs/147765

こんなときに役立つ授業です ・パーツを作る毎日に不安を感じている ・会社のサイト担当で1人だけの制作部、我流アートディレクションに不安を感じている ・上司のアートディレクターからの依頼を巧くこなしたい パーツによりすぎて、サイト全体で見ると浮いているボタン、細部にこだわりすぎてレイアウトしにくいパーツなど、独りよがりなとんちんかんなデザインになっていませんか? パーツ制作物で、接近レンズの視野になっているデザイナーさんに、細部を制作する時も常に広角レンズの目で全体を見渡せる視野を身につける授業です。 最初のコンセプトからかけ離れたオプションの依頼があった場合も、トータルデザインを損なわない手法で、アートディレクターの依頼の意図を的確に判断する手法を学びます。 この後続く、各パーツごとのデザインテクニックの勉強をする前にまず、サイト全体をデザインする手法を学びます。 ■受講にあたって準備するもの Adobe Photoshop (ヴァージョンは問いません) ・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロー ドしてください。 https://creative.adobe.com/ja/products/download/photoshop ・WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入って いる事が望ましいです。 ・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見てPhotoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。 https://helpx.adobe.com/jp/photoshop.html ▼本授業は全2回の連続授業です。両方受講することでより深く学ぶことができます。 ・とんちんかんなデザインにしないためのアートディレクション講座vol1 ・とんちんかんなデザインにしないためのアートディレクション講座vol2

この授業では、Webデザイナーとしての仕事のクオリティを高めることができます。自分で作成したデザインの見直しポイント、デザインの表現方法、Illustrator、Photoshopの作業効率を2倍に上げる方法が学べます。

この授業は、Illustrator初心者の方を対象とした、Illustratorを使った名刺の作り方を学べる授業です。 ソフトの使い方から、実際の制作物を仕上げるまでを学んでいきます。 この授業の受講には「Adobe Creative Cloud IllustratorCC」が必要です。 インストールされたPCをご用意いただくか、下記URLから無料体験版をインストールしてください。 また、授業は「Adobe Creative Cloud IllustratorCC」で実施いたしますが、別バージョンのIllustratorでも受講可能です。 ※また、授業中に「名刺制作用台紙」「Illustrator便利ツール」を利用しますので、事前にダウンロードしていただいていると、スムーズに受講できます。 ▼Adobe Creative Cloud IllustratorCC(体験版ダウンロード) https://creative.adobe.com/products/illustrator ▼名刺制作用台紙 http://bit.ly/19MFd9Q ▼Illustrator便利ツール http://bit.ly/173Z2Ew   ・授業開講から5年以上経過しております。アプリケーションの操作やデータなど異なる場合がございます。 ・1回目の授業内で紹介しております授業データはご利用いただけません。  

UIデザインはもとより、デザイン自体もちょっと自信がない。でもWebサービスやアプリ作りに関りたい。そんな方々に向けてUIデザインの概要から実践を分かりやすく解説します。 「あっという間にアナタのモックアップがステキになる」そんな授業です。 授業内では、アシスタントが実際にプロトタイプを作ります。余裕がある方は一緒に作ってみましょう。より理解が深まります。

エンジニアや上級者向けと思われているBootstrapですが、実はコーディングが苦手なデザイナーにこそ役立つ便利なものです。 Bootstrapとは、最初からカッコイイデザインが付いてくるCSS集で、HTMLを書いてBootstrapのCSSを読み込めば今風なサイトが出来上がるという優れもの。HTMLの知識が少しでも表示崩れの少ないコーディングができるようになり、非常に学習コストが下がりました。しかし、カスタマイズや運用を考えると少し複雑になります。 そこで本授業にてカンタンなサイトを作り、BootstrapでのWebサイト制作の過程を学びましょう。 これによって今後、 ・1時間でカンタンなWebサイトを作る ・レスポンシブWebデザインを作る ・プログラムが分からなくても操作性のあるサイトを作る ことができるようになります。 Webサイトを作るとなるとどうしても避けられない「コーディング」。これを機会に簡単コーディング術をマスターしましょう!

Photoshopを使ってWeb制作をしているけど、もっと便利にできないかな?と思っている方向けの授業です。 紙と同じようにデザインを作って、再現できなければ画像にしちゃえばいいじゃない!という作業でなんとかできてきたWebデザインだと、今後おまんまが食べられなくなる。そんな時代になってきました。 たくさんのデバイスが出てきて「このデバイスだと動かない!」という状況がぐんと増えてきたからです。 ですので早めにコーディングを済ませて、動くかどうかを見てからデザインをするというフローにWebデザイン自体がシフトしています。じゃあ、もうPhotoshopはいらないの? いいえ、そんなことはありません。詳しくは授業で話しますがPhotoshopはまだまだ無くならないでしょう。 今回はそんな状況でPhotoshopを使っていかに早くコーディングをできる状態にするか。など、「今」のWebデザインに寄り添った使い方を紹介していきます。 この授業を受けたら出来るようになること ・画像の書き出しが超絶ラクになる! ・CSSを書く手間が少なくなる! ・デザインのドキュメントを作る手間が少なくなる!

ランディングページは制作する機会は多くても、その性質や特徴を聞かれると「???」となってしまうコトが多いのではないでしょうか? ・キャンペーンサイトと似ているけれど何が違うの? ・公式サイトと同じ情報なのに、なんでもう一個作らないといけないの? といった疑問は初めて作るとき、こんがらがってしまうのではないでしょうか? ランディングページはWebデザインの中でも「チラシ」に似ているもので、グラフィックデザインが重視される傾向が強くなりがちです。またメッセージ性が非常に強いので、目的と原稿をことさら意識する必要があります。 本授業ではランディングページってそもそもどういうものなの?なんで作るの?という基礎からデザインするときに知っておくべきこと、覚えておきたいコツや機能の使い方を解説します。 ■使用する機材 【ハードウェア】 ・Macbook Air 【ソフトウェア】 ・OS X Mavericks ・ Photoshop CC 最新バージョン ・ Illustrator CC 最新バージョン ■この授業を受けることで出来るようになること ・LPページと他のWebサイトの違い ・素材がなくてもステキなデザインを作るためにできること ・電話番号、ボタンのデザイン ・見出しのデザイン ・デザインに迷わずにすむ作業の順番

スマートフォンのシェア拡大により、PCサイトよりも先に作る依頼も増えてきました。スマートフォン制作のスキルはWebデザインではもはや必須と言えると思います。インターフェイスの設計では迷うところも多いし、画像をどのように書き出すのか、その作り方も初めてだと戸惑ってしまうでしょう。 この授業では、デザインする上で重要な下準備、さらにビジュアルだけでなくインターフェイスの設計の上での大切なところ、マークアップエンジニアさんに渡す画像の書き出しにおいてどういった点を気を付けるべきかを全体の流れを通してみつつ、そのポイントを紹介していきます。 ■使用する機材 【ハードウェア】 ・Macbook Air 【ソフトウェア】 ・OS X Mavericks ・ Photoshop CC 最新バージョン ・ Illustrator CC 最新バージョン ■この授業を受けることで出来るようになること ・ページングのときにどんな見た目にすればいいか分かる ・ページ全体のデザインの考え方が分かる ・ボタンやアイコンのデザイン ・親指のサイズを意識したタップしやすい見た目を作る

実際に作ってみる!それが一番勉強になります。本授業では簡単なシングルページを作成することで、今必要とされている中でも特に基本的な技術に対して丁寧に解説していきます。 第1回はドキュメントも充実しているBootstrapでのレスポンシブコーディング。 現在のWeb制作はアプリなどの需要も増え、早い段階で動くWebページを見せることが必要になってきています。そのためにBootstrapでモックアップのようにコーディングしていき、それらが実際に各デバイスで動かすとどうなるか。このフローを何度も繰り返すことが増えていきます。 「良く聞く話だし、重要性も分かってるけど、みんな実際にどうやってるの?」という疑問を持っている方たちに向けて、お話していきますので普段の疑問をぶつけてみてくださいね。 ■授業中に使うデータ ■必要なもの * Bootstrap * Edge Inspect ■学べること * フレームワークの実践的な利用方法 * フレームワークを利用した簡単レスポンシブコーディング * 便利な無償アプリを使った検証方法 ■デザイン実践ゼミ全3回 ・レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】 ・デザインツール利用編【イシジマミキのデザイン実践ゼミ】 ・簡単なjQuery実装編【イシジマミキのデザイン実践ゼミ】  

前回に引き続き、実際にわたしが行っている開発を解説していきます。 Photoshopを触る時間は以前より格段に少なくなり、その変わりコードに触れ合う時間が長くなりました。 本授業ではとくに「インブラウザって本当にPhotoshop使わないの?」と疑問に思っている方々に向けて、わたしがどのくらいの頻度でそれぞれに触れているか、シングルページのデザインを作りながら解説していきます。 必要なもの * Photoshop * Sketch * less コンパイラ   学べること * インブラウザを前提としたPhotoshopの利用方法 * Photoshop以外のデザインアプリ、Sketchの簡単な利用 * cssをもっと便利にかけるlessでのコーディング方法 ■授業中に使うデータ ■デザイン実践ゼミ全3回 ・レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】 ・デザインツール利用編【イシジマミキのデザイン実践ゼミ】 ・簡単なjQuery実装編【イシジマミキのデザイン実践ゼミ】

いよいよ、最後となりました。イシジマミキのデザイン実践ゼミ。今回はHTML,CSSを離れてjQueryです!HTML,CSSは理解できていてもjQueryとなるとソースコードをコピペするくらいしか…。という人は多いのではないでしょうか? 本授業ではそういった方々に向けて、本当に基礎の基礎の怖くないjQueryの部分を丁寧に解説していきます。 最初はBootstrapで同梱されているjsを使って簡単なモーダルウィンドウなどを実装していきましょう。それができたらスクロールバーを固定表示させる方法について解説していきます。どちらも意外に簡単なのですよ。 最後にコードを管理する上で欠かせない、gitについても解説。覚えるものは5つだけなので非常に簡単です。※あらかじめご自身の環境にgitをインストールしておいてくださいね。 必要なもの * git (授業ではコンソール(黒い画面)で解説します。) コンソールを利用します。インストールは下記を参考にしてください。 http://www.backlog.jp/git-guide/intro/intro2_1.html ※外部のリンクになります 授業中に使うデータ 学べること * フレームワークとjQueryを活用したインターフェイスの実装 * 簡単なjQueryコードで実践できる便利な機能 * いつでも戻せる安心なバージョン管理システム gitの利用方法 ■デザイン実践ゼミ全3回 ・レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】 ・デザインツール利用編【イシジマミキのデザイン実践ゼミ】 ・簡単なjQuery実装編【イシジマミキのデザイン実践ゼミ】

自分のデザインのどこが悪いのかが分からない、でもなんとなく足りなく感じる。そんな話をエンジニアさんから聞くことがあります。 さくっとシンプルなWebサービスを作るときでも、デザインが違うだけで利用してもらえるユーザーの増え方が変わったりしますよね。せっかく作ったのであれば、多くの人に知ってもらいたい、使ってもらいたい。というのは当然なことです。 今回の授業は、そんなエンジニアさんに向けて、デザインはどんなルールがあるのか、他の要因とどんな関係があるのかをなるべく「ロジカル」に伝えて、理解の手助けとなるよう工夫しています。 第一回目は、デザインでも重要なコミュニケーションの部分である、デザインレビューの大切さとキモ。そして、デザインを決めるのに必要な情報や素材の選定を行っていきます。 ここで8割のデザインが決まるので気合を入れていきましょう! 2限目以降はこんな流れになります。 2限目:色、書体の選び方、情報の整理について 3限目:デザインの原則を用いたレイアウト 4限目:デザインの最終段階、チェックリストを用いた検証について この授業を見れば、「デザインはセンスだけで成りたつものではない」というコトが分かりますよ。

Adobeからリリースされた期待のUI/UXデザインツール、Adobe XD。 アプリはもちろん、Webサイトのワイヤーフレームも簡単に作れるうえに、操作はとってもシンプル。パワーポイントなどの操作ができる人であれば、デザイナーに限らず、ディレクターやエンジニア、チーム全体での制作が可能になります。 このコースではそんなAdobe XDについて学んでいきます。

 昨今、Web/スマートフォンのアプリ開発市場では開発言語やフレームワークも増え、年々開発環境は変化しています。その一方で未だに人材不足は解消されていません。 学ぼうと考えている未経験の人にとってアプリを作る、デザインするという行為は「難しいのではないか?」と思うのでは無いでしょうか。 この授業では、Webアプリの見た目となるUIのデザインの制作手順を学び、実際にFigmaを駆使したラフデザインの作成方法とテクニックを学びます。   【このコースで学べる事】 UIデザインの基礎知識 スタイル・コンポーネントを用いてパーツを用意する Figmaを使ってアプリデザインを作ってみる プロトタイプの作成

この授業では、デザイン思考を活かして、人や組織のコミュニケーションを伸ばす方法を学びます。   デザイナーと聞くと、多くの人は成果物を作ることを仕事としている人と思いがちですが、デザイナーが得意なことはそれだけではありません。デザイナーが持つデザイン思考を活かすことで、コミュニケーションをはじめとする組織の問題を解決することができます。   ビジネスの場面でも使う人が増えてきた「デザイン思考」とはどういう考えなのか、デザイナー以外の人が学んだとして、コミュニケーションをどう良くしてくれるのか? そして、デザイナーはチームで仕事をする際、何をやっていて、チームにどんな関わり方をしているのか。 デザイン思考によるコミュニケーションのノウハウを学びます。

担当の授業一覧 全27授業

エンジニアのためのデザイン入門「名前?そんなもん適当でいいだろ」編

第1回 エンジニアのためのデザイン入門「名前?そんなもん適当でいいだろ」編(60分)

2015年7月14日放送

自分のデザインのどこが悪いのかが分からない、でもなんとなく足りなく感じる。そんな話をエンジニアさんから聞くことがあります。 さくっとシンプルなWebサービスを作るときでも、デザインが違うだけで利用してもらえるユーザーの増え方が変わったりしますよね。せっかく作ったのであれば、多くの人に知ってもらいたい、使ってもらいたい。というのは当然なことです。 今回の授業は、そんなエンジニアさんに向けて、デザインはどんなルールがあるのか、他の要因とどんな関係があるのかをなるべく「ロジカル」に伝えて、理解の手助けとなるよう工夫しています。 第一回目は、デザインでも重要なコミュニケーションの部分である、デザインレビューの大切さとキモ。そして、デザインを決めるのに必要な情報や素材の選定を行っていきます。 ここで8割のデザインが決まるので気合を入れていきましょう! 2限目以降はこんな流れになります。 2限目:色、書体の選び方、情報の整理について 3限目:デザインの原則を用いたレイアウト 4限目:デザインの最終段階、チェックリストを用いた検証について この授業を見れば、「デザインはセンスだけで成りたつものではない」というコトが分かりますよ。

Photoshopの作業効率が2倍になる神業を伝授【イシジマミキのガチンコゼミ】

第4回 Photoshopの作業効率が2倍になる神業を伝授【イシジマミキのガチンコゼミ】(90分)

2014年11月22日放送

「あ!その機能そうやって使ってるんだ」 他の人がどうやって操作しているか、知りたくありませんか? 作業している間はひとりなので、自分が気付いてない便利な方法がまだあるかもしれません。 「それを知ってるだけで、よくあるあの作業もっとラクにできたのに…。」 「その機能、もっと早く知りたかった…!」 などなど、そんな便利なTIPSの数々をこの機会に覚えましょう! 本授業では、Photoshopで絶対覚えておきたいショートカットや環境設定、便利な機能をありがちな「普段の悩み」からチョイスしてお届けします。 ・レイヤーの選択をもっと簡単にしたい ・さくっと指定サイズの長方形を作りたい ・補正を後からやり直せるようにしたい などなど。その他に、知りたいことがあったら「受けたい」ボタンを押してコメントを残しましょう。 アナタの疑問を生放送で解決しますよ。 ■Photoshopの悩みや疑問は下記まで■ 「kadai@schoo.jp」宛に下記をメール本文に明記し送ってください。 ※ 本授業の悩み受付は締めきりました * 「Photoshop」で困っていること、悩み、疑問 ※具体的にお願いします * お名前(ペンネーム、イニシャル可) * 具体的にソフトで作った制作物あれば一緒に送ってください

Illustratorの作業効率が2倍になる神業を伝授【イシジマミキのガチンコゼミ】

第3回 Illustratorの作業効率が2倍になる神業を伝授【イシジマミキのガチンコゼミ】(90分)

2014年11月17日放送

「先輩のデザイナーはなんであんなに仕事が早いんだろう?」 Illustratorには、プロでもまだ知らないように機能がたくさん隠れています。 ネットに書くほどでもないけど、それがデキると作業が格段になるTIPSの数々。 それを知らないまま作業したら、また終電ギリギリまで仕事することになっちゃうかも…。 この機会に覚えましょう! 本授業では、Illustratorで絶対覚えておきたいショートカットや環境設定、便利な機能をありがちな「普段の悩み」からチョイスしてお届けします。 ・角丸データをあとから直したい ・かけたぼかしをあとから直したい ・空いたスペースにキレイに写真を並べたい などなど。その他に、知りたいことがあったら「受けたい」ボタンを押してコメントを残しましょう。 アナタの疑問を生放送で解決しますよ。 ■ダウンロード資料 http://bit.ly/1zskyl5 ■Illustratorの悩みや疑問は下記まで■ 「kadai@schoo.jp」宛に下記をメール本文に明記し送ってください。 ※ 本授業の悩み受付は締めきりました * 「Illustrator」で困っていること、悩み、疑問 ※具体的にお願いします * お名前(ペンネーム、イニシャル可) * 具体的にソフトで作った制作物あれば一緒に送ってください  

直しに強いデザインの作り方、デザインの捻り出し方【イシジマミキのデザインレビュークオリティアップ編】

第2回 直しに強いデザインの作り方、デザインの捻り出し方【イシジマミキのデザインレビュークオリティアップ編】(90分)

2014年11月10日放送

1回目は「デザインのアプローチ法」をメインにレビューしましたが、2回目は「クオリティアップ編」です! * 直しに強いデータの作り方 * もっと良くする方法の捻り出し方 などを重点的に見ていきましょう! 作ったものをレビューしたら終わりという訳ではありません。 実際にそのレビューを元に修正してみる。というのが大切です。 デザイナーが自分しかいない人は要チェックです。 ---- デザインの考え方の授業、たくさんありますが、自分のおかれている組織の環境や仕事内容、そして実際に作る案件によっても変わってしまいます。 考える順番や最新のテクニックを見たけれど、まだ足りない気がする…。実際の作業ではやっぱり迷うこともたくさん。と困っているアナタに向けて、実際に寄せられたデザインのデータと原稿をもとにイシジマ先生がレビューをします! 作品を作ることはとても重要ですが、レビューをしてもらうことによって成長スピードが3倍増になります! ■課題の提出方法 課題提出例です。提出方法は簡単なので下記URLからデータをダウンロードしてください。 http://bit.ly/schoo1103 ※応募テキスト例(テキストファイル)と宿題サンプルデータが入っています。 「kadai@schoo.jp」宛に送ってください。 ※ 本授業の課題提出は締めきりました アシスタントへのドSキャラが定着しつつありますが、今回は丁寧に優しくレビューしますよ。 デザインレビューをしながら原稿の見るべきポイント、そしてどう作るべきかを勉強します。 普段の授業ではこぼれ落ちてしまいがちな、具体的なデザインポイント。一緒に勉強しましょう!

あなたのデザインを良くするたったひとつの方法【イシジマミキのデザインレビューデザインアプローチ編】

第1回 あなたのデザインを良くするたったひとつの方法【イシジマミキのデザインレビューデザインアプローチ編】(90分)

2014年11月3日放送

今回の授業はみなさんのデザインをレビューし「デザインのアプローチ法」をお伝えします!(募集方法は以下参照) デザインの考え方の授業はたくさんありますが、自分のおかれている組織の環境や仕事内容、そして実際に作る案件によっても変わってしまいます。 考える順番や最新のテクニックを見たけれど、まだ足りない気がする…。 実際の作業ではやっぱり迷うこともたくさん。 と困っているアナタに向けて、実際に寄せられたデザインのデータと原稿をもとにイシジマ先生がレビューをします! 作品を作ることはとても重要ですが、レビューをしてもらうことによって成長スピードが3倍増になります! ■デザインは下記まで■ 過去に作った作品などがありましたら 「kadai@schoo.jp」宛に下記を明記し送ってください。 ※ 本授業の課題提出は締めきりました * 過去に作ったもの * お名前(ペンネーム、イニシャル可) * 作品の原稿 (クライアントからの依頼内容だけでもOKです) アシスタントへのドSキャラが定着しつつありますが、今回は丁寧に優しくレビューしますよ。 デザインレビューをしながら原稿の見るべきポイント、そしてどう作るべきかを勉強します。 普段の授業ではこぼれ落ちてしまいがちな、具体的なデザインポイント。一緒に勉強しましょう! ■次回課題の提出例 次回授業の課題提出例です。提出方法は簡単なので下記URLからデータをダウンロードしてください。 http://bit.ly/schoo1103 ※応募テキスト例(テキストファイル)と宿題サンプルデータが入っています。

書体や色のイメージで表現!「Webデザインアイデア」の膨らませ術

第8回 書体や色のイメージで表現!「Webデザインアイデア」の膨らませ術(90分)

2014年10月20日放送

■こんな方はぜひチェック * デザインをやりたいけどデザインセンスがないからと敬遠している人 * デザイナーとのコミュニケーションに困っているディレクター * ソフトは一通り使えるけど、いまいち自分のデザイン力に自信がない人 ■こんなことありませんか? ・どの書体を使うのか迷って結局同じにしてしまう ・色使いが毎回似通ってしまう ・クライアントに納得してもらうデザインに仕上がらない ・デザインのアイデアが膨らまない・・・ この授業ではデザインのアイデアの膨らませ方を、書体や色などからアプローチします。 色ごとに与える印象が違うのは、なんとなく分かりますよね。赤は元気で活動的、青は爽やかで信頼できそう。などなど。 書体にもセリフ、サンセリフ、ゴシック、明朝いろいろありますが、同じセリフでもHelvetica,Arial,Univers,myriad、表情が全くことなります。言い換えれば、一つ間違えると全く違う印象を与えるデザインになってしまうということです。 これらをどのように使うべきか、悩んでしまってデザインが進まず困っていませんか? さまざまな表情を持つデザインエレメントを、どう使ってクライアントの言う「カッコいい」を表現するか。「カッコイイ」を表現するためのさまざまな手法を学びます。 この授業を通して、自分なりのパターンを完成させてみましょう。 【イシジマミキ先生のデザイン理論:全2回】 ■デザイン脳は作れる!感覚ではなく、理論を伝えるデザインの話 ■書体や色のイメージで表現!「Webデザインアイデア」の膨らませ術    

簡単なjQuery実装編【イシジマミキのデザイン実践ゼミ】

第1回 簡単なjQuery実装編【イシジマミキのデザイン実践ゼミ】(90分)

2014年10月6日放送

いよいよ、最後となりました。イシジマミキのデザイン実践ゼミ。今回はHTML,CSSを離れてjQueryです!HTML,CSSは理解できていてもjQueryとなるとソースコードをコピペするくらいしか…。という人は多いのではないでしょうか? 本授業ではそういった方々に向けて、本当に基礎の基礎の怖くないjQueryの部分を丁寧に解説していきます。 最初はBootstrapで同梱されているjsを使って簡単なモーダルウィンドウなどを実装していきましょう。それができたらスクロールバーを固定表示させる方法について解説していきます。どちらも意外に簡単なのですよ。 最後にコードを管理する上で欠かせない、gitについても解説。覚えるものは5つだけなので非常に簡単です。※あらかじめご自身の環境にgitをインストールしておいてくださいね。 必要なもの * git (授業ではコンソール(黒い画面)で解説します。) コンソールを利用します。インストールは下記を参考にしてください。 http://www.backlog.jp/git-guide/intro/intro2_1.html ※外部のリンクになります 授業中に使うデータ 学べること * フレームワークとjQueryを活用したインターフェイスの実装 * 簡単なjQueryコードで実践できる便利な機能 * いつでも戻せる安心なバージョン管理システム gitの利用方法 ■デザイン実践ゼミ全3回 ・レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】 ・デザインツール利用編【イシジマミキのデザイン実践ゼミ】 ・簡単なjQuery実装編【イシジマミキのデザイン実践ゼミ】

レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】

第1回 レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】(90分)

2014年9月15日放送

実際に作ってみる!それが一番勉強になります。本授業では簡単なシングルページを作成することで、今必要とされている中でも特に基本的な技術に対して丁寧に解説していきます。 第1回はドキュメントも充実しているBootstrapでのレスポンシブコーディング。 現在のWeb制作はアプリなどの需要も増え、早い段階で動くWebページを見せることが必要になってきています。そのためにBootstrapでモックアップのようにコーディングしていき、それらが実際に各デバイスで動かすとどうなるか。このフローを何度も繰り返すことが増えていきます。 「良く聞く話だし、重要性も分かってるけど、みんな実際にどうやってるの?」という疑問を持っている方たちに向けて、お話していきますので普段の疑問をぶつけてみてくださいね。 ■授業中に使うデータ ■必要なもの * Bootstrap * Edge Inspect ■学べること * フレームワークの実践的な利用方法 * フレームワークを利用した簡単レスポンシブコーディング * 便利な無償アプリを使った検証方法 ■デザイン実践ゼミ全3回 ・レスポンシブコーディング編【イシジマミキのデザイン実践ゼミ】 ・デザインツール利用編【イシジマミキのデザイン実践ゼミ】 ・簡単なjQuery実装編【イシジマミキのデザイン実践ゼミ】  

【Photoshop特訓】バナーからはじめるクライアントワーク vol2

第5回 【Photoshop特訓】バナーからはじめるクライアントワーク vol2(90分)

2014年9月12日放送

前回はデザインの8割を占めるコンセプト、方向性の模索を行いました。 今回は残りの2割、実際に作る過程を学習していきましょう。 デザインは見ているだけでは、何も変わりません。同じものを作るように模写して、はじめて血肉に変わります。 書体の意味、余白の意味、カラーチョイスの意味。それらは自分で作るまで「キレイなもの」でしかないのです。 今回の授業では、前回最後にお話した、資料を「引き出し」に変える方法から、実際のトレースの方法、そしてそれを元にしたオリジナル作品の作り方を見ていきましょう。 ■学べること   * Photoshopでのバナーの作り方   * キャンバスサイズの便利な作成方法   * 背景色の管理   * 写真のお手軽補正   * 文字組み調整   * カラーチョイスのコツ   * Web用に書き出す方法 ■バナー甲子園:関連授業一覧 ・PhotoshopでWebデザインするときの悩みに答えます ・バナーからはじめるクライアントワーク vol1 ・バナーからはじめるクライアントワーク vol2 ・クリックされるバナーをデザインする実践テクニック vol1 ・クリックされるバナーをデザインする実践テクニック vol2 ※バナー甲子園の案件はこちら http://crowdworks.jp/public/jobs/147765  

【Photoshop特訓】バナーからはじめるクライアントワーク vol.1

第4回 【Photoshop特訓】バナーからはじめるクライアントワーク vol.1(90分)

2014年9月11日放送

Photoshopが使えれば、クラウドソーシングなどで依頼されるバナー制作から、自身のデザイナーとしてのキャリアを初めることができます。 もちろん最初は戸惑うことばかりでしょうが、それをひとつずつ解決していくことでデザインのスキルやビジネスへの理解を深めることができます。なにより場所や時間、勤務形態にとらわれず仕事ができるのがいいですね。 この授業では、コンペ企画として、実際にクラウドワークスさんに案件を提供していただきみなさんに制作していただくことを目標としています。 第一回の今回は、 * クライアントの要望を的確に知る * デザインの引き出しを増やす を中心に行っていきます。 いくらカッコ良いデザインでも、クライアントの意向に沿わなければ採用されません。クライアントの望んでいることを知るために、質問をしたり、クライアントの業界に関して理解を深めることが重要です。 そのために、デザイン着手前にインタビューのようにいろいろ質問をしたり、競合他者を調べ、要望を達成するための仮設を立て、実際にそれと似たテイストのデザインを漁り参考にして自分の引き出しを増し、仮設を作品に落としこむ。結果的に自分の引き出しも増えるなんて、お得づくしですね! ■学べること * 作品づくりに必要な情報の引き出し方 * デザインの引き出しを増やす資料の漁り方 * 資料を「引き出し」に変える方法 * 作品を作るという経験! ■バナー甲子園:関連授業一覧 ・PhotoshopでWebデザインするときの悩みに答えます ・バナーからはじめるクライアントワーク vol1 ・バナーからはじめるクライアントワーク vol2 ・クリックされるバナーをデザインする実践テクニック vol1 ・クリックされるバナーをデザインする実践テクニック vol2 ※バナー甲子園の案件はこちら http://crowdworks.jp/public/jobs/147765  

グラフィックデザインを重視したランディングページの作り方

第1回 グラフィックデザインを重視したランディングページの作り方(60分)

2014年3月8日放送

ランディングページは制作する機会は多くても、その性質や特徴を聞かれると「???」となってしまうコトが多いのではないでしょうか? ・キャンペーンサイトと似ているけれど何が違うの? ・公式サイトと同じ情報なのに、なんでもう一個作らないといけないの? といった疑問は初めて作るとき、こんがらがってしまうのではないでしょうか? ランディングページはWebデザインの中でも「チラシ」に似ているもので、グラフィックデザインが重視される傾向が強くなりがちです。またメッセージ性が非常に強いので、目的と原稿をことさら意識する必要があります。 本授業ではランディングページってそもそもどういうものなの?なんで作るの?という基礎からデザインするときに知っておくべきこと、覚えておきたいコツや機能の使い方を解説します。   ■使用する機材 【ハードウェア】 ・Macbook Air 【ソフトウェア】 ・OS X Mavericks ・ Photoshop CC 最新バージョン ・ Illustrator CC 最新バージョン   ■この授業を受けることで出来るようになること ・LPページと他のWebサイトの違い ・素材がなくてもステキなデザインを作るためにできること ・電話番号、ボタンのデザイン ・見出しのデザイン ・デザインに迷わずにすむ作業の順番

Illustratorで名刺制作(3限目)

第3回 Illustratorで名刺制作(3限目)(60分)

2013年9月5日放送

※この授業の受講には「Adobe Illustrator CS6」もしくは「Illustrator CC」が必要です。 インストールされたPCをご用意いただくか、下記URLから無料体験版をインストールしてください。 https://creative.adobe.com/products/illustrator 趣味の活動をしているとき、Webサイトやブログはもちろん、Tシャツや活動を記録した冊子など作りたいけど困ることはありませんか? 個人用の名刺なんかもあるとイベントに行ったときなど話もはずむし、なにより楽しいですよね。 名刺というのはあんな小さいサイズながら、デザインのノウハウが詰まった小宇宙です。 「デザイン」とは、とても広いものですが、ざっくり分類すると「使うためのデザイン」「伝えるためのデザイン」「装飾のためだけのデザイン」などがあります。 まずは入口としてソフトの使い方から入ります。次に名刺を作ることによって「自分を上手く伝える」ことも一緒に考えていきましょう。 「自分」というのは自分から見ると複雑で、奥深く、難しいものです。これが少しでも分かると、人のことを伝えるのはとてもカンタンになります。 この授業を完了すると、名刺だけじゃなくチラシも作れるようになります。ミニ冊子だって、そのうちWebデザインやロゴも作れるようになるでしょう。 デザインの醍醐味である「コミュニケーション」部分が分かってもっともっとおもしろくなりますよ。 ●8月7日(水)1限目:Illustratorでクリエイティブ名刺をつくってみよう! ●8月16日(金)2限目:アイデアを膨らませる操作を覚える ●8月23日(金)3限目:間違えない、間違えても大丈夫なデータの作り方

Illustratorで名刺制作(2限目)

第2回 Illustratorで名刺制作(2限目)(60分)

2013年8月16日放送

※この授業の受講には「Adobe Creative Cloud IllustratorCC」が必要です。 インストールされたPCをご用意いただくか、下記URLから無料体験版をインストールしてください。 授業は「Adobe Creative Cloud IllustratorCC」で実施いたしますが、別バージョンのIllustratorでも受講可能です。 ※また、授業中に「名刺制作用台紙」「Illustrator便利ツール」を利用しますので、事前にダウンロードしていただいていると、スムーズに受講できます。 ▼Adobe Creative Cloud IllustratorCC(体験版ダウンロード) https://creative.adobe.com/products/illustrator ▼名刺制作用台紙 http://bit.ly/19MFd9Q ▼Illustrator便利ツール http://bit.ly/173Z2Ew ▼名刺制作素材 (2限目から使用) http://bit.ly/15I73MY 趣味の活動をしているとき、Webサイトやブログはもちろん、Tシャツや活動を記録した冊子など作りたいけど困ることはありませんか? 個人用の名刺なんかもあるとイベントに行ったときなど話もはずむし、なにより楽しいですよね。 名刺というのはあんな小さいサイズながら、デザインのノウハウが詰まった小宇宙です。 「デザイン」とは、とても広いものですが、ざっくり分類すると「使うためのデザイン」「伝えるためのデザイン」「装飾のためだけのデザイン」などがあります。 まずは入口としてソフトの使い方から入ります。次に名刺を作ることによって「自分を上手く伝える」ことも一緒に考えていきましょう。 「自分」というのは自分から見ると複雑で、奥深く、難しいものです。これが少しでも分かると、人のことを伝えるのはとてもカンタンになります。 この授業を完了すると、名刺だけじゃなくチラシも作れるようになります。ミニ冊子だって、そのうちWebデザインやロゴも作れるようになるでしょう。 デザインの醍醐味である「コミュニケーション」部分が分かってもっともっとおもしろくなりますよ。 ●8月7日(水)1限目:レイアウトしながら基本操作を知ろう ●8月16日(金)2限目:アイデアを膨らませる操作を覚える ●8月23日(金)3限目:間違えない、間違えても大丈夫なデータの作り方 ※この授業の受講には「Adobe Illustrator CS6」もしくは「Illustrator CC」が必要です。 インストールされたPCをご用意いただくか、下記URLから無料体験版をインストールしてください。 https://creative.adobe.com/products/illustrator

Illustratorで名刺制作(1限目)

第1回 Illustratorで名刺制作(1限目)(75分)

2013年8月7日放送

・授業開講から5年以上経過しております。アプリケーションの操作やデータなど異なる場合がございます。 ・この授業内で紹介しております授業データはご利用いただけません。   この授業の受講には「Adobe Creative Cloud IllustratorCC」が必要です。 インストールされたPCをご用意いただくか、下記URLから無料体験版をインストールしてください。 また、授業は「Adobe Creative Cloud IllustratorCC」で実施いたしますが、別バージョンのIllustratorでも受講可能です。 ※また、授業中に「名刺制作用台紙」「Illustrator便利ツール」を利用しますので、事前にダウンロードしていただいていると、スムーズに受講できます。 ▼Adobe Creative Cloud IllustratorCC(体験版ダウンロード) https://creative.adobe.com/products/illustrator  ▼名刺制作用台紙 http://bit.ly/19MFd9Q ▼Illustrator便利ツール http://bit.ly/173Z2Ew 趣味の活動をしているとき、Webサイトやブログはもちろん、Tシャツや活動を記録した冊子など作りたいけど困ることはありませんか? 個人用の名刺なんかもあるとイベントに行ったときなど話もはずむし、なにより楽しいですよね。 名刺というのはあんな小さいサイズながら、デザインのノウハウが詰まった小宇宙です。 「デザイン」とは、とても広いものですが、ざっくり分類すると「使うためのデザイン」「伝えるためのデザイン」「装飾のためだけのデザイン」などがあります。 まずは入口としてソフトの使い方から入ります。次に名刺を作ることによって「自分を上手く伝える」ことも一緒に考えていきましょう。 「自分」というのは自分から見ると複雑で、奥深く、難しいものです。これが少しでも分かると、人のことを伝えるのはとてもカンタンになります。 この授業を完了すると、名刺だけじゃなくチラシも作れるようになります。ミニ冊子だって、そのうちWebデザインやロゴも作れるようになるでしょう。 デザインの醍醐味である「コミュニケーション」部分が分かってもっともっとおもしろくなりますよ。 ●8月7日(水)1限目:レイアウトしながら基本操作を知ろう ●8月16日(金)2限目:アイデアを膨らませる操作を覚える ●8月23日(金)3限目:間違えない、間違えても大丈夫なデータの作り方