イシジマ ミキ

この授業は、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回目の授業内で紹介しております授業データはご利用いただけません。  

エンジニアや上級者向けと思われている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 最新バージョン ■この授業を受けることで出来るようになること ・ページングのときにどんな見た目にすればいいか分かる ・ページ全体のデザインの考え方が分かる ・ボタンやアイコンのデザイン ・親指のサイズを意識したタップしやすい見た目を作る

■バナー制作習得は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回はドキュメントも充実している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実装編【イシジマミキのデザイン実践ゼミ】

こんなときに役立つ授業です ・パーツを作る毎日に不安を感じている ・会社のサイト担当で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倍に上げる方法が学べます。

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

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

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

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

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