街なかにある看板や広告、何気なく読んでいる雑誌など、あらゆるデザインの現場で使われているPhotoshop。「これどうやって作るの？」と思わず言いたくなる、魔法のようなデザインテクニックを披露しているチュートリアルで、スキルアップを目指してみませんか。 今回はデザイナーが参考にしたい、最新 Photoshop チュートリアルをまとめてご紹介します。デモ用 PSD ファイルを無料ダウンロードできる素材もあるので、これからフォトショップをはじめるひとにもオススメです。 Photoshopの使い方を知ろう！参考にしたい新作チュートリアル、作り方34個まとめ 2018年5月度 Photoshopってすごい！どうやって作った？を解決するチュートリアルつくり方まとめ 怪しくぼんやりと輝くネオン風テキぽストエフェクトの作り方 筆ブラシでペイントしたようなフォントに、鮮やかな配色を利用し、ぼかしエフェクト

最前線で活躍されているアートディレクター・デザイナー127組によるデザイン作品、普段目にすることができないラフスケッチ・アイデアメモ・絵コンテ・企画書などの制作過程で作成されたものまで楽しめる、貴重なデザインの資料集を紹介します。 実際に、デザインの課題を解決した152のアイデアや企画書が満載です。

アートディレクションってなんか横文字偉そうに聞こえます。 簡単に言うと”デザインで課題を解決できるように導く”と言うことです。 もっともっと誰でもわかるように言うと、今より良くするためにダメ出しすると言うこと。 ただの悪口とはちゃうで。 ディレクションとは 先日、twitterでこんな書き込みを見つけました。 名刺でけた pic.twitter.com/jG386AUKHL — 大河内 明日香 (@AsukaOkochi) 2018年3月19日 エンジニアの方が作ったオリジナルの名刺です。 正直に言うと”素人っぽいっ感じだな”って思いました。�（ごめんなさいね） ただtwitterとはいえ、話たこともない人のデザインに口出しをするのはさすがに躊躇しました。 だけど簡単にもっと良くなるのになって思ったんです。 だから、勇気を出して。と言うか我慢できずに言っちゃった。 おもて面のロゴをほんの少

写真やイラスト、図、テキストなどデザインする要素をどのようにレイアウト（配置）するかがデザインの仕上がりの肝になる。 同じような情報を連続して並べる場合、リズムをつけると心地よくみせることができる。リズムが崩れると不安定に見え、安心感がなくなってしまうため、同じような情報は制限を作り、リズムよく見せることを意識するのが大切だ。 一方で、リズムを作ることができれば、そのリズムを崩すことで目立たせることができる。同じような情報でも強調したいものとそうでないものの差をつけることで、ユーザーへのメッセージが明確になる。また、その差がないと何を伝えたいのかが、分からなくなりやすい。 ユーザーがどのように目線を動かすか配慮してレイアウトすると、読みやすくなる。一般的には、横書きの場合はZ型、F型と呼ばれ、左上から右下に向かって目を動かすと言われている。 デザイン要素の中に人の目線を使うと、見ているユー

こんにちは。デザイナーのヴィクトリアです！ 今回は、Webデザインの専門用語についてご紹介したいと思います。最近のLIGデザイナー陣の会話に頻出している単語を中心に集めてました。一通りおさえておけば、飛び交う会話の内容も理解できるはず。 これからデザイナーを目指す人や駆け出しの人に届けー！ デザイナー陣だけでなく会話にダントツ出てくるワード 1.UI UIは、User Interface（ユーザーインターフェース）を省略した言葉です。 詳しくは先輩デザイナーのみやっちが書いているので、そちらを引用します！ UIはユーザーインターフェースの略で、コンピュータやシステムとユーザーの橋渡しをするためのものです。 パソコンで言うと、本来コマンドで動作を書くべきところを、クリックやドラッグなどの直感的な操作で実現してくれるOSやソフトウェアがインターフェースにあたります。 また、クリックやテキスト入

デザイナーにコミュニケーションスキルが必要と言われるしその通りだと思うけど、日本の美大でコミュニケーション教育は重視されてないのに関わらず、社会に出たら突然「重要です！」と言われて最近の新卒は「突き放された気持ちになる」と言う話をたまに聞く。 社会人はデザイナーに限らず、コミュニケーションスキルが必要だけどデザイナーが不幸なのは教えてくれる人が極端に少ない点だと思う。 デザインスキルは楽器演奏と同じで、実践による反復運動の繰り返しで身につくモノなので本人の努力次第だけど、コミュニケーションスキルは言語化してレクチャーする方が伸びが早い。 デザイン相談を依頼されて「うちのデザイナーはコミュニケーション力が無くて...」と課題感を持つ人は多いですがデザイナーの問題だけではなく、デザイナーが下流工程に居る事で情報不足・見積もり不足で、不利な状況が故にその問題が起こっているケースの方が多い。 この

配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を

こんにちは！LIGの新米デザイナー、ヴィクトリアです！ 最近、メディアサイトのデザインに携われる機会がありました。その中で、私がデザインするのに学びの多かった「記事詳細ページ」について、おさらいしたいと思います！ ページごとに異なる“注意すべき要素” 一般的なコーポレートサイトを作るときも、下層に着手する前にルールを決めると思いますが、メディアサイトでも、もちろんその必要があります。ページ数が多いので、ちゃんと決めておかないと、あとでぐちゃぐちゃになってしまいます。 デザインするページによって注意すべきポイントが変わってきますので、今回は記事詳細ページの要素についてまとめたいと思います！ 記事詳細ページのヒント 本文テキスト 読みやすいコンテンツ幅はどのくらいか？横に長すぎると改行を見失って読みづらくなってしまうので一般的には800〜1000pxのサイトが多いと思います。Webページにおい

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

制作時に役立つillustratorのチュートリアル「Illustrator Tutorials: 35 Fresh and Useful Adobe Illustrator Tutorials」 デザイナーはイラストレーションやフォントの処理など様々なテクニックが求められます。高度な技術を求められた時、チュートリアルがあるととても便利です。今回紹介するのは、制作時に役立つillustratorのチュートリアル「Illustrator Tutorials: 35 Fresh and Useful Adobe Illustrator Tutorials」です。 Create a Shattered 3D Geometric Text Effect in Adobe Illustrator – Vectips 初心者にも役立つ基本的な操作から、高度な技まで幅広くチュートリアルが紹介されています

日頃からTEDなどの動画サイトを著名人のデザイン思想や日々の取り組みを知る場として利用されている人は多いと思います。以前Goodpatch Blogの記事でも幾つかの有益なTED動画を紹介させていただきました。 1. デザインあ デザインあはNHKで毎週土曜と木曜の午前に放送されている知育番組です。キャッチコピーは「こどもたちの未来をハッピーにする「デザイン的思考」をはぐくむ」となっておりますが、大人でも楽しめる内容になっています。 番組紹介ページにもある通り、デザインとは人とモノ、人と人との繋がりをより良くするためのプロセスというまさにUXの本質を説くような番組になっていて、一見難しいと思われるUXの重要性を子どもたちにも分かるように有名クリエイターによって緻密に計算された音楽と映像を使って感覚的に説明しているのがこの番組の特徴です。 個人的にはこの番組を見て育った子どもたちがどういう大

みなさんブログのデザインってどんな感じにしてるんでしょうか。 ほとんどの方は使っているブログサービスで配布されているものだったり、有料のテーマであったり、大体は既製品をカスタマイズ使っている場合が多いと思います。 ブログのデザインって第一印象を決める上ですごく重要だと思っていて、個人的には面白そうな内容でも読みにくさのあまり閉じてしまうこともあります。 もったいないですね。 スラスラ読めるブログとそうでないブログ。 一体何が違うんでしょうか。ぼくなりに読みやすいブログデザインを考察してみたいと思います！ 全体の統一感 まずは全体のデザインルールを決めます。 通常ブログでカスタマイズするのはこのあたりになるかと思いますが、基本的には「自分の好きなように」でOKです。 その方が愛着がわきます。その上で見やすく読みやすいデザインを考えていけばいいと思います。 極端な例ですが、派手な色が好きだから

前回の記事で18分類までを紹介 前編 → https://developers.cyberagent.co.jp/blog/archives/4875/ 後編 → https://developers.cyberagent.co.jp/blog/archives/5038/ ケーススタディ CASE 01：可視化してフィードバック 以前の記事でも書かせていただいていますが、そもそも27分類のスキルの使い道はここにあります。日々の面談や評価のフィードバックなど、デザイナーメンバーとの対話の際に以下の様なシートを使っています。 シートには、各フェーズごとの9項目と “ よかった ” と “ 期待 ” の欄があります。 よかった → 成長した、達成できた 期待 → いま足りていない 「よかった」と「期待」は2〜3項目でづつピックアップして書くのがルールです。全て書いてしまうと結局どこが良くて、ど

クリエイティブな発想力がほしい、デザインの知識をつけたい――。そんな芸術への憧れをもちつつも、いざ学校で専門的に学ぶとなると金銭面や時間的なハードルを感じてはいないだろうか。 そんな中、通学は一切不要で、在学生はパソコンやスマートフォンを使って知識を深め、卒業後には芸術学士の資格を取得できる大学がある。京都造形芸術大学通信教育学部が提供する動画を使った通信教育課程 芸術教養学科、通称「手のひら芸大」だ。 全国各地に住む10代から70代までの学生たちが、オンライン上で切磋琢磨しながら学んでいるという。手のひら芸大とは、一体どのような場なのか。芸術教養学科学科長を務める早川克美先生にお話を伺った。 完全インターネット学習「手のひら芸大」とは ――手のひら芸大では何をどのような形で学ぶのでしょうか？ 手のひら芸大では、世界中の芸術の歴史や先人たちの知恵や伝統を理解し、現在進行形のデザインを通して

前提教育プログラムが定まっていない小規模の組織で、インターン・アルバイトに対して、どのようにデザイン教育をしていくか 課題（悩み）教育とリターンのバランス 即戦力じゃない人にデザインを覚えてもらいつつ、組織へのリターンのバランス 時間的制約 インターンやアルバイトの場合、フルタイム勤務ではないので間が空いてしまう。学生さんだとテスト期間を挟むと１ヶ月ほどのブランクも。 また、１年や２年で一度卒業することを前提とするため、卒業を見据えた着地も考える必要がある。 めざすゴール長い目でみて、良い関係値を築けるようにする 将来的に仕事を手伝ってもらったり、将来の転職先候補に選んでもらったり、短期的なリターンは目指さない （性善論ではなく、短期的リターンならクラウドソーシングなどのほうが楽だし早い） 前述、時間的制約も見据えて、デザイナーとしてのキャリアのスタートになるような経験をできるだけしてもら

2020年2月13日 CSS, HTML, Webサイト制作 Web制作初心者の方向けに教える仕事をちょこちょこしているのですが、その時よく思うのが、本を眺めるだけでは覚えられないな…という点。やはりコーディングに関しては実際に手を動かしてみないと自分のスキルとしてしっかりと定着しません。そこで今回は私が教える中でよく使っている簡単な「コードチャレンジ」を紹介します。Web制作を勉強中の方や、同じく初心者向けに教えているという方の学習のヒントになればと思います。 ↑私が10年以上利用している会計ソフト！ コードチャレンジの進め方 私が教える際によく使うツールはCodePen。実際に書いたコードがその場で表示されるので、生徒側も「これを書いたらこう変化する」というのが実感しやすいようです。 この記事に埋め込まれているCodePenの画面の右上「EDIT ON CODEPEN」をクリックすると