人生でやりたい100のこと




デザイン初心者がデザインの勉強を30日間毎日続けてみた

PAK69_kinosup20140329
マットカッツの30日間チャレンジを見て
「とりあえず、なんでも30日間は続けてみる」
ってのを始めました。(始めた理由とか→【83-Dの30日間チャレンジ】)

記事にインパクトをあたえるためにファーストビューにキャッチコピーつきの画像を配置したいと思っています。

どうせならフォントとかバランスとかこだわりたいと思ったのでデザインの勉強をすることに。

スキルアップすれば、バナーとかも作っていきたいですね。
スキルアップすれば、ブロガー名詞とかも作りたい。。。
スキルアップすれば、仕事を依頼されたい。

夢が広がります♪

1日目:積読中だった『レイアウト、基本の「き」』を読む【1】 1時間ほど

デザイン初心者の管理人にとっては非常にありがたい書籍。
これからデザインを学んで行く上での基礎、考え方が身に付く書籍です。

「どこをどうしたら、もっとわかりやすくなったり魅力的になったりするんだろう」と考えてみること。何よりもそれが大切でしょう。

レイアウト、基本の「き」P16より

本書は、どこをどうしたら、もっとわかりやすくなったり魅力的になったりするかを具体的に教えてくれます。

バナーのデザインについて下記ページで勉強中
【バナーデザインの教科書】訴求したいイメージ別|王道デザイン8選!

2日目:積読中だった『レイアウト、基本の「き」』を読む【2】 1時間ほど
まずは、記事のキャッチコピーを改善したいと思っている管理人です。
タイトルやキャッチコピーを目立たせる必要があります。

一番簡単な方法は、本文と比べて「大きく」、次に「太く」すること。

レイアウト、基本の「き」P74より

まぁ、当たり前のことではありますが、本書ではサンプルデザインを交えながら解説してくれるので素人でも違いがわかります。

また、タイトルは一番目立つ部分であるのでバランスを考えてきれに文字組をする必要があります。
こちらもサンプルを交えながら説明してくれていますが、文字組には基本があるものの感覚、経験も必要です。

本書を片手に、文字と文字の間隔(字間)を調整したり、字間の調整をする文字詰めをしてみました。
yakumono

上がデフォルト。下が管理人が調節したものです。
数字とアルファベットを少し大きくし文字の高さと字間を調節しました。

「正直、どっちが良いかわからん!!」
「時間をかけてまでする必要のある行為なのか?!」
そんな心の声が聞こえます。汗

日本語の文はかなり特殊です。
漢字、ひらがな、カタカナ、数字、アルファベット、約物(「」とか、。などの記号)が混在します。

たしかに、デフォルトのものはカタカナの部分の字間が広いように感じます。
まずはそれに気がつくことが重要かと思います。

「どこをどうしたら、もっとわかりやすくなったり魅力的になったりするんだろう」と考えてみること。何よりもそれが大切でしょう。

レイアウト、基本の「き」P16より

昨日も引用しましたが、まずは違いに気付いて考えてみることが重要です。

3日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【2】 15分ほど

まださわりしか読んでいませんが、昨日読んだ『レイアウト、基本の「き」』よりは実践的な内容っぽいです。
Photoshop、Illustrator、Indesignなどを使って解説する場面もあります。
僕はPhotoshopしか持ってません。。
ソフトがなくても読み物として楽しむことは出来ますが、どれかひとつくらいは用意したほうが良さそうです。

4日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【3】 15分ほど
今日は、抽象化について学びました。

抽象化とは、”モチーフとなる対象から大事な部分を抜き出して、それ以外を省略していく行程”のことです。

How to Design いちばん面白いデザインの教科書P14より

アイコンやシンボルを作成するときじ使える考え方だそうです。

5日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【3】 30分ほど
似たような言葉の定義が明確になった。

  • アイコン
  • ピクトグラム
  • インデックス
  • シンボル
  • モノグラム

あなたはこれらの言葉の違い、意味などを明確に答えることができますか?
私はできます。『How to Design いちばん面白いデザインの教科書』を見ながらでしたら。

6日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【4】 30分ほど
以下のオブジェクトの持つ特徴が明確になった。

  • 長方形
  • 正多角形

あなたはこれらのオブジェクトの特徴などを明確に答えることができますか?
私はできます。『How to Design いちばん面白いデザインの教科書』を見ながらでしたら。

実際の企業のアイコンなどを参考に円や長方形等々がもつイメージ特徴などが解説されています。

7日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【4】 30分ほど
デザインについて知っておきたい用語の定義がしてあります。
しかも、図解付き。
かなり分かりやすい書籍です。
今、30ページくらいまで読んでいますが全部引用したいくらいです。笑

「テクスチャー」とは、ものがもっている質感のことです。

How to Design いちばん面白いデザインの教科書P30より

テクスチャーって壁紙とか背景って意味だと思っていた……

8日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【5】 30分ほど
色の基本について学習しました。
色の三属性という概念を学びました。

色相

色相とは、色を光の波長の違いで見たときに変化する様相のことですが、要は「赤っぽい」「青っぽい」といったような「色み」の変化のことを表します。

How to Design いちばん面白いデザインの教科書P37より

明度

明度とは、色の明るさを表した要素です。

How to Design いちばん面白いデザインの教科書P37より

明度の差を付けると目立ちやすくなります。
明度の差があるものの代表例として黄色と黒の道路標識があります。
警告を表しているので目立つようにしているんですね。

彩度

彩度とは、色の鮮やかさ、色みの強さを表す要素です。

How to Design いちばん面白いデザインの教科書P38

簡単に言うと彩度が上がれば、子供っぽく見えます。
彩度を下げると落ち着いて大人っぽい印象になります。

9日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【6】 30分ほど
無彩色、有彩色について学ぶ。

白と黒、グレーなど彩度が内色を無彩色、その他を有彩色という。
無彩色の白と黒は大抵、どんな色にも合う。

フムフム……

10日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【7】 30分ほど
色って奥が深い。。。。
深すぎる!!!

覚えるのがメンド…………っじゃなかった。。楽しいです。

11日目:今日は趣向を変えて【schoo】の【デザインのスマイルカーブを分析する】を受講 1時間ほど
先日、【schoo】の有料会員になりました。
【schoo】にはデザインやプログラミング、思考法等々、自分が興味のあるジャンルの授業がたくさんあります。

それが有料会員になった理由です。

今日はそんな【schoo】の授業の中の【デザインのスマイルカーブを分析する】を受講。
「フォントのサイズがどうこう」
「この時にはこの色を使う」
とか手を動かす系の話ではなく、ブランディングとかデザインマーケティングとか大きな意味でのデザインのお話。
僕には少し難しく感じましたが、デザインを職業としたい人にはいずれ必要になる知識かと思います。

30days

12日目:【schoo】の【Webサイトに配置する画像素材を作るためのPhotoshop基礎】を受講 1時間ほど
【schoo】の【Webサイトに配置する画像素材を作るためのPhotoshop基礎】を受講しました。

Photoshopの使い方の基礎的なことを教えてくれます。
動画だと雰囲気が伝わってくるので良いですよね。

この講では、写真を切り抜き、背景をぼかす方法を解説しています。
【Webサイトに配置する画像素材を作るためのPhotoshop基礎】を受講すると

この画像↓と
MIYAKO85_uchiagerareta20140726

この画像↓を使って
OH98_koudainasetugen

こんなの↓が作れるようになります。
huku

た、たのしい。。

13日目:【schoo】にて見たいと思っているデザイン系の動画をまとめる 30分ほど
【schoo】にて見たいと思っているデザイン系の動画をまとめています。(これはデザインの勉強をしたことになるのか、、、)

WebサイトでTOP画像をより効果的に見せるためのPhotoshop基礎

WebデザインのためのPhotoshopを使った画像加工のポイント【補習アリ】

「初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)

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

クリックされるバナーをデザインする実践テクニック vol1

14日目:とりあえず手を動かす 30分ほど
僕が運営している、GOATと言うサイトで使う画像を編集した。
正直、ダサいのはわかっているが、どこをどうすればダサくなくなるかがわからない……

sekai_hi

30日間経過すれば、わかるようになるのだろうか……

15日目:【schoo】の【WebサイトでTOP画像をより効果的に見せるためのPhotoshop基礎】を受講 15分ほど
WebサイトでTOP画像をより効果的に見せるためのPhotoshop基礎を見る。ためになる小技がたくさん紹介されている。。
だが、15分くらいで睡魔に襲われる。。。

寝る。。。

【schoo】の【WebサイトでTOP画像をより効果的に見せるためのPhotoshop基礎】を受講し学んだ事を活かし手を動かす。こりゃ勉強になったわ!! 1時間ほど
昨日は急激な睡魔に教われていまったが、今日は大丈夫。
WebサイトでTOP画像をより効果的に見せるためのPhotoshop基礎は、すげぇよかった。

背景の雰囲気を壊すことなく可読性を上げる技法を学びました。

あんまり変わらない?!汗
あんまり変わらない?!汗

上の文のほうが読みやすくありませんか??
テキストに光彩(外側)をつけただけです。Photoshopは超便利です。

プログラミングよりデザインの方が楽しい。。
でも僕はプログラミングのスキルの方が上達してほしい。。

17日目:【schoo】の【WebデザインのためのPhotoshopを使った画像加工のポイント【補習アリ】】を受講 30分ほど
WebデザインのためのPhotoshopを使った画像加工のポイント【補習アリ】を受講しました。

スライスに関する授業。
ウェブサイトを作るお仕事をする人には必須のスキルだとは思いますが、僕にはあまり関係のないことかと。

スライスの技術についてはあまり興味がありませんでしたが、いくつか勉強になったことがあります。
まず、jpg画像をウェブ用に保存するときはやや高画質(70)ほどでOKとのこと。
少しでも画像を軽くするのは良い事だと思います。(今まで最高画質(100)で保存してた……)

スクリーンショット 2014-09-27 17.08.03

あと、webの場合は解像度72dpiが良いとのこと。(300dpiで保存していた……)

スクリーンショット 2014-09-27 17.13.50

スクーって内容の薄い授業しか無いと思っていましたが、結構、勉強になるな〜〜〜。

18日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【8】 30分ほど
『How to Design いちばん面白いデザインの教科書』の【色】のチャプターを読了。
色相、彩度、明度の意味を改めて確認。
アマチュアの場合、IllustratorやPhotoshopの機能で自動的にいい感じの配色をしてくれるものがあるので色相、彩度、明度を覚えなくてもいいかもしれませんが、頭の片隅に置いておくと良さそうです。
19日目:【schoo】の【初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)】を受講 1時間ほど
【schoo】の【初心者向けロゴ・デザインワークショップ」 -東洋美術学校(第一回目:デザインコンセプトの組み方編)】を受講しました。

文字(フォント)について。
〜グラフィックデザインでは情報の大小を適切な文字サイズで表す〜

って基本的な概念について名刺を例に解説されていました。
基本的に名刺で一番目立たせたいのは名前。だから名前を大きくする。
当たり前のようですが、改めて動画で講義を聞くと納得できます。
っていうか今日(10月1日)ってデザインの日だったんですね。。知らなかった。

20日目:他サイトのトップページ画像を作成 30分ほど
秘密のサイトのためトップページ画像は非公開です。
まぁ、写真にフォントを載せただけなんですが……
上達しているか微妙……
21日目:プロってどんな感じなんだ?? 15分ほど
他人が作ったものを見たいと思うようになりました。

バナー・ヘッダーのデザイン|ココナラ

で、バナーやヘッダーをPSD形式で納品してもらい技を盗もうかと思っています。(そもそもPSD形式で納品してくれるのか知らないけど……)

21日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【9】 30分ほど
文字の章を読み出す。
実際にデザインとかをするときにフォントの種類が多すぎて、なんとなくこんな感じでいいか!!!
と終わらせてしまう俺です。
アマチュアなんで出来る技でしょうね。。プロだとそうはいかないと思います。(多分)

「なんとなくこんな感じでいいか!!!」
で終わらせるとあまり成長しない気がするので、しっかりやっていきたいですが、いかんせんアマチュアなもので……

22日目:積読中だった『How to Design いちばん面白いデザインの教科書』を読む【10】 30分ほど
ウェブで人気のフォント「メイリオ」

文字幅のバラツキが少なく、横書きしたときも字間の差は少ない。

How to Design いちばん面白いデザインの教科書P69より

この特徴を持つフォントは横書きにしたときに読みやすいそうです。

23日目:新しく作ったペラサイトのトップページ画像を作成 30分ほど
新しく作ったペラサイトのトップページ画像を作成しました。(まぁペラサイトなんでトップページしかないんですが……)

「お。このサイトのトップ画像いいな!」
って思ったのサイトがあったんで完全に真似してみました。
Photoshopの使い方を覚えると、気に入ったバナーやトップ画像なんかがあると、

「お。ここにドロップシャドウ使ってるな?」
「お。ここぼかすといい感じになるんだ!」
「写真がきれいにそろってるけど、効率よく揃える方法とかあるんかいな??」
とか色々と気づきや疑問が生まれます。

「こうやってデザインのスキルが上がっていくんだろうな」
と思う今日この頃です。
理論や理屈的なことももちろん大事ですが、やはり手を動かすことで成長できると思います。

24日目:色んな視点からデザインを考えさせる記事を発見 10分ほど
20万円かけてランサーズでロゴマークを募集してみてわかったこと

コンペで集まったロゴを見る事ができます。
素人目にはどれもよく見えます。(中にはこれはちょっと……)
ってのもありますが。。

僕も外注してみよう。。(20万円はさすがにかけられないですが……)

25日目:LIGのブログでロゴの記事があがってたので熟読 10分ほど
デザインの参考にしたい素敵な日本語のロゴ20選

説明してもらえればなんとなく
「お〜。そういうことか。。なるほど」
って思うんですけど、このロゴじゃなきゃいけないのか??
とかなんとか考えだすとカオスです。

26日目:佐藤可士和の動画を見る 2時間ほど
デザインと言えば佐藤可士和っしょ!?(僕はただのミーハーでしょうか。。)
関連記事:佐藤可士和の動画を文字起こししたら歌っぽくなった
27日目:積読中だった『インタフェースデザインの教科書』を読む【1】 30分ほど

脳科学や心理学などの観点からも解説されているのでおもしろいです。
ちょっと難しいですが……

28日目:新しいサイトのtop画像を作る 30分ほど

スクリーンショット 2014-10-26 14.50.18

次は英語をがんばろうと思っています。

29日目:【1年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強法】】を読む 15分ほど
1年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強法】

webデザイナーって1年でなれるもんなんですね。。
この記事に書いていることはけっこうやってるな僕も。。(順番は違うけど。)

とりあえず、この30日間チャレンジの集大成として、名刺でも作ってみるか?

30日目:サイドバーをいじった 30分ほど

スクリーンショット 2014-10-31 18.51.08
「名刺作らへんのんかい!!!」
ってつっこみはなしでお願いします。
30日間、デザインについて色々と学んできました。

理屈は身に付きましたが、いざ自分でレイアウトなどをしてみると上手く行きません。
やはり数をこなす必要がありそうです。
デザインなんて理屈だけ身につければ簡単にできるものだと過信していました。

次は、【デザイン初心者がスキルアップのために30日間毎日手を動かし続けてみた】をするべきかもしれませんね。


『今』やってること、明日の自分はそのことを誇らしく思うだろうか?
Return Top