Webデザイン学習日記

これは僕がWebデザイナーになるまでに学んだことを書き綴っていくブログです。

フィリピンのセブ島へデザイン留学するので、これから「セブ留学日記」を書いていきます!

「セブ留学日記」を書いていきます

 

こんにちは!夏より冬が好きなカエデです。

 

さあタイトルにも書いてある通り...

私...

フィリピンのセブ島へ留学してきます!

 

3ヶ月間!

 

さて、何をしにいくかというと観光です。

 

...

です。

 

今回は、モンスターアカデミアさんが行なっている「IT・デザイン留学3ヶ月コース」に参加してきます!

 

モンスターアカデミアは、欧州・アジア・北米の3大経済圏、12ヵ国21拠点に自社拠点を構えるモンスターラボ」さんがフィリピンで行なっている教育事業です。

セブは留学が盛んで、語学留学の他にも「英語 × IT」のような、語学とプログラミングを学べる留学も数多く存在します。

そんな中、特にデザインに特化したような留学を経験できる「モンスターアカデミア」さんはとてもレアな留学なんです。

もしよろしければ下のリンクをクリックして見てください!

https://monstar-academia.com/

 

これから3ヶ月間デザインと英語を学びにいくので無駄にはしたくない!

 

ということで、

これから3ヶ月間学んだことをアウトプットしていく「セブ留学日記」をこれから書いていきたいと思います!

 

僕と同じようにデザインを学ばれているような方々にも満足いくような内容を書いていけるよう頑張りますので、ぜひ僕と一緒に成長していきましょう!

 

まだ日本ですが飛行機がめっちゃ心配...笑

更新がなかったら「カエデ飛行機で失敗したな」と思ってもらって構いません。笑

 

まあこれからいろんな経験や体験ができると思うので、不安と楽しみが入り混じった変な気持ちですが、それらも含めてブログで書き綴っていきたいと思います!

 

これからもよろしくお願いします!

 

ちなみに「あるあるデザインアウトプット」は週一の更新になってしまうかと思います。

そちらもよろしくお願いします。

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその14。

「文字散りばめ」

 

こんにちは!冷凍焼きおにぎりが大好きなカエデです。

 

「あるあるデザイン」アウトプットその14ということで、今回は「文字散りばめ」です。

 

それでは早速僕が作ったデザインを見ていきましょう!こちらです!

 

f:id:kaedebook:20190731174759p:plain

 

題して「文具メーカー"TANAKA PENSIL"」です!

 

このように文字を散りばめることによって、デザインの装飾性がアップします。

また、余白をうまく使うことでおしゃれな印象を与えることができます

 

実際作ってみて

 

おしゃれな雰囲気を簡単に作ることができます。

 

実はこのように文字を散りばめるようなデザインは、あるあるデザインその2でやった「ちっちゃい文字飾り」(見たことない方はこの機会に...)のデザインと似ていて、違いといえば ”規則性があるかないか” といった部分になってくるかと思います。

 

どちらが使いやすいかは個人によって違いますが、僕的にはこちらの「文字散りばめ」の方が、自分の置きたいと思う場所に文字を配置することができるので使いやすかったです。

 

また「ちっちゃい文字飾り」は規則性があって綺麗に見えるので、スタイリッシュでクールな印象を与えることができるのに対して、「文字散りばめ」は規則性がなく自由な配置なので、おしゃれでアーティスティックな印象を与えることができると思います。

 

このようにそのテーマごとに使うデザインを変えるというのも一つの手かと思います。

 

 皆さんもぜひ使ってみてはいかがでしょうか?

 

以上が「文字散りばめ」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその13。

「洗練グラデーション」

 

こんにちは。ディズニー・シーの乗り物で吐きそうになるカエデです。

 

「あるあるデザイン」アウトプットその13ということで、今回は「洗練グラデーション」です。

 

早速僕が作った作品を見ていきましょう!こちらです!

 

f:id:kaedebook:20190728083552p:plain

 

題して「公共施設"未来科学博物館"」です。

 

このようにグラデーションを使用することで、80年代の雰囲気を醸し出し、今の若者が好むようなデザインを作ることができます。

また、キャンディーカラーのポップなグラデーションは人気だそうです。

 

実際に作ってみて

 

グラデーションがあるだけで映える。笑

 

先ほど「今の若者が好むようなデザイン」と言いましたが、まさしくその通りだなと思います。

 

インスタ映えとかよく言いますが、インスタ映えするものって大体非現実的なものが多く、それを誰かに見てもらいたいからカメラに収めるのだと思います。

 

そして非現実的なものの中には綺麗なものが含まれるのですが、グラデーションは綺麗かつ日常ではなかなか味わうことができないようなデザインです。

 

それこそ南国の綺麗な海だったり、夕日が沈む前の綺麗な空だったり...

思わず遭遇したら写真を撮りたくなるような一面をデザインの一部に取り組むことで、若者が好む「非日常的な印象」を与えることができると思います。

 

そして今回は未来科学博物館ということで、「非日常的」なイメージを醸し出すために、中央の球体を地球に見立てた綺麗な青いグラデーションを使用しました。

 

今回は「若者が好む」という意味では少し違ったデザインの使い方になりましたが、非日常的な印象を与えたいときにも使ってもいいのかもしれません。

 

以上が「洗練グラデーション」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその12。

「グリッドってかしこそう」

 

こんにちは!コンビニは最強だと思ってるカエデです。

 

「あるあるデザイン」アウトプットその12ということで、今回は「グリッドてかしこそう」です。

 

それでは実際に僕が作ったデザインを見ていきたいと思います!

 

f:id:kaedebook:20190726183800p:plain

 

題して「雑貨メーカー"ROYAL INTERIOR"」です!

 

このように背景にある写真をグリッドで分けることによって、カチッとした賢い印象を持たせることができます。

また、それぞれのグリッドに違う要素をはめ込むのもOKだそうです。

 

実際に作ってみて

 

めちゃくちゃお手軽だと思います。笑

 

今回のテーマはインテリア系ということで、とりあえずシンプルにスタイリッシュなデザインにしようと思っていました。

 

その理由は無印が大好きだからです。笑(しんぷるいずべすと)

 

そんなデザインを作りたいと思ったときに「グリッドってかしこそう」を使えば、まずは間違いないかと思います。

 

しかも今回は、グリッド一つずつに違う要素ではなく、背景の要素の上からグリッドを引くデザインなので、とてもシンプルかつ簡単に作成することができました。

 

また、写真を大きく取り上げたいときに、「なんか寂しい」、「もう少し凝ったデザインにしたい」と思ったら、手軽に間違いのないデザインを作ることが可能です。

 

デザインに困ったらぜひ使ってみてはいかがでしょうか?

 

以上が「グリッドてかしこそう」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

 

 

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその11。

「斜線で切るやつ」

 

こんにちは!ペットボトルの蓋開けるのに一苦労するカエデです。

 

「あるあるデザイン」アウトプットその11ということで、今回は「斜線で切るやつ」です。

 

早速僕が作ったデザインを見ていきましょう!

こちらです!

 

f:id:kaedebook:20190725094957p:plain

 

題して「イベント"Web Designer Day in 2019"」です!

 

このようにスパッと斜めに切るようなデザインを入れることによって、スタイリッシュな印象を与えることができるのです。

画面で大きく配置して、かっこよくインパクトを出したいデザインに最適です。

 

実際に作ってみて

文字を切りたかった。泣

 

「あるあるデザイン」にはこのデザインの参考例が載っているのですが、文字を実際に斜線で切るようなデザインが使われていました。

 

僕もぜひそれをやりたいと思っていたのですが、Photoshopでの切り方がわからなかったです。泣

 

時間もなかったので今回はこのデザインで我慢しましたが、余白も少なくあまり良いデザインとは言えないかもしれません。

 

ただ、今回イベントやセミナーといった、主に大人が目にするような内容だったので、スタイリッシュな部分を出すという意味では効果があったかと思います。

また、青の落ち着いたイメージを採用することで、よりクールな印象を与えることができているかと思います。

 

ただ出来が...うーん...もうちょっと頑張ります。笑

 

皆さんもぜひ使ってみてはいかがでしょうか?

 

以上が「斜線で切るやつ」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその10。

「ヌケ感中抜け文字」

 

こんにちは!クモが巣を作っているところに愛着が湧いたカエデです。

 

「あるあるデザイン」アウトプットその10ということで、今回は「ヌケ感中抜け文字」です。

 

それでは早速僕が作ったデザインを見ていきましょう!

こちらです!

 

f:id:kaedebook:20190723212405p:plain

 

題して「学習塾"学びっこ塾"」です!

 

このように見出し文字などを中抜きの文字にすることによって、圧迫感がない軽快な雰囲気を出すことができるのです。

また装飾としての効果も期待できるため、さらにおしゃれなデザインを作ることが可能になります。

 

実際に作ってみて

もっといろんなところで使ってみたいと思いました。笑

 

実は今までの僕はこのような「中抜け文字」を使うという発想がなく、「あるあるデザイン」を読んで知ったときに、新しい引き出しができたような感じがしてすごいワクワクしました。

 

実際に作ってみたらまあなんて良いデザインでしょうか!

 

今回は学習塾のデザインということで、より清潔感だったり、見やすさというものが求められました。

 

そんなときに「ヌケ感中抜け文字」を使うことによって、見出しはベタ塗りで重たい雰囲気を出すこともなく、さらに清潔感も出すことができ、まさしく一石二鳥な効果が発揮されました。

 

また中抜け文字は文字自体を装飾するものなので、スペースだったり、どう配置するかなどを考える必要もなく、とても取り入れやすいデザインになっているのではないかと思います。

 

なので清潔感や、ヌケ感、さらにはもう少しおしゃれにしたいときなどにも、手軽に試すことができるかと思います。

 

皆さんもぜひ使ってみてはいかがでしょうか?

 

以上が「ヌケ感中抜け文字」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

 

20サイト比較!本当に評価の高い洋画はなんなのかランキング!

洋画で評価が高い映画はなんなのか徹底的に調べました。

 

こんにちは!買ったウクレレが届くまで楽しみなカエデです。

 

さて、今回はデザイン関係の投稿は一休みで、ずっとやってみたかったことをやりたいと思います。

それは「洋画の中で評価が高い映画はなんなのか」ということです。

 

そして、それを調べるのに最も有効な方法は「映画を数多く見ている人の評価が高い映画を調べる」ということだと思います。

 

なので今回やって見ました。笑

 

題して「20サイト比較!本当に面白い洋画はなんなのかランキング」!!

 

ルール

ルールは簡単。

洋画のみ。ジャンル問わず。個人的評価ランキング。

上記に該当するWebサイト、ブログ記事を検索順に20サイト調べ上げました。

 

そして、そのサイト、ブログ内のTOP10の洋画にポイントを与えます!

10位は1pt、9位は2pt、... 2位は9pt、1位は10ptという風に順位一つ違いで1ptずつの差ができるような形式になっています。

 

つまり、そのサイト、ブログ内で1位を取ればそれだけで10pt、また、別のサイトで10位になれば1ptプラスで合計11ptになるということです。

 

そんな風に20サイトを比較し、ptを足していくことで、最もptの高い洋画が「本当に評価の高い映画」と言えるのではないかと私考えたわけです!笑

 

数多くいる映画好きの評価をひとまとめにした今回のランキング。

そのランキングで上位に入っている洋画こそ評価が高いと言えるかと思います。(あくまで評価が高い洋画です)

 

これ実は結構大変でした。

また、個人によって全然違う洋画がランクインしているのでptが分散しちゃうかなと思いましたが、蓋を開けてみればやはり評価の高い洋画はすごいなと思いました。

 

なので今回は11pt以上獲得した洋画のみでランキングを作りました。

理由:  一つのサイトだけで1位(10pt)だけでは評価が高いとは言えないので、11pt以上の洋画が最低ラインにしました。

 

20サイトでTOP10に入った映画は109作品。

そのなかから11pt以上の厳選映画20作品。

発表していきたいと思います。

 

ランキング

 

18位 11pt(同率3作)

 

スタンド・バイ・ミー

セッション

パルプフィクション

 

 

16位 12pt(同率2作) 

 

バタフライ・エフェクト

ユージュアル・サスペクツ

 

 

15位 13pt

 

君に読む物語

 

 

13位 17pt(同率2作) 

 

タイタニック

きっとうまくいく

 

 

11位 18pt(同率2作)

 

天使にラブソングを

ローマの休日

 

 

9位 19pt(同率2作)

 

ライフ・イズ・ビューティフル

風と共に去りぬ

 

8位 24pt 

 

ニュー・シネマ・パラダイス

 

 

7位 25pt 

 

フォレスト・ガンプ

 

 

6位 31pt 

 

インターステラー

 

 

5位 32pt

 

レオン

 

 

4位 34pt 

 

ダークナイト

 

 

3位 38pt 

 

バック・トゥ・ザ・フューチャー

 

 

2位 45pt 

 

ゴッド・ファーザー

 

1位 51pt 

 

ショーシャンクの空に

 

 

 

集計を終えて

 めっちゃ疲れました。笑

 

それはさておき、やっぱり名作と言われているものは評価が高いですね。

個人的には「ショーシャンクの空に」「レオン」が好きなので、ランキングに入っていて嬉しかったです。

ただ「グッドウィルハンティング」「ビューティフルマインド」が入っていなかったのでがっかりしました。笑

 

一番驚いたのは4位に「ダークナイト」が入ってきたことです。

ぜひ観ようと思います!

 

それから皆さんのおすすめする洋画もコメントの方からいただけると嬉しいです。

 

どうだったでしょうか?

みなさんも気になった映画があったら、夏休み、お盆休みを利用して観てみてはいかがでしょうか !

 

「あるあるデザイン」アウトプットの方もよろしくお願いします!

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその9。

「オビを敷くだけ」

 

こんにちは!昨晩吐き気がするほどの腹痛に見舞われたカエデです...笑

 

「あるあるデザイン」アウトプットその9ということで、今回は「オビを敷くだけ」です。

 

それでは早速僕が作ったデザインをみていきましょう!こちらです!

 

f:id:kaedebook:20190720085421p:plain

 

題して「アパレルショップ"Dark & Light"」です!

 

このように横や斜め、または縦にオビを敷くことによって、文字を見やすくするだけでなく、工夫することで可読性も向上する効果が得られます

まさに一石二鳥なデザインなのです。

 

そして今回からWebデザインではなく、ポスターに変更しました。笑

というのも、先日に念願だった "Adobeコンプリートプラン" を購入しまして、とうとうPhotoshopを手に入れたからです!

なので、ツールの勉強も含めて、これからのアウトプットはPhotoshopでポスター作りという形に変更していこうかと思います。

 

実際に作ってみて

 

作っていて楽しかったです。笑

 

今回アパレルショップのポスターデザインをテーマにしましたが、まあオビを作るならファッション系かなと。笑

めちゃくちゃ浅いですけど、今回作ったようなデザイン結構あるあるですもん。笑

 

そして何が楽しかったのかというと、デザインがしやすかったという所からきているかと思います。

 

オビの背景色を自分の作りやすい色に変更でき、またさらに自分の描きたいようなフォントのカラーも選ぶことができるので、ポスターの背景が写真でも問題なくデザインすることができるため非常にやりやすいです。

 

それなら「左から4分の1の法則」を使っても「写真と文字を書く領域を半分にしても変わらなくない?」と思われるかもしれませんが、少し違います。

 

まず、オビを敷くことによって少なからずデザインに動きを加えることができます。

そうすると今回のようなアパレルショップのデザインに合うような要素を加えられます。

 

また、文字単体の特徴が出しやすいため、目立たせたいものとの区別をつけることができます。

今回は「NOW ON SELL」と書かれている文字の背景を赤にして目立たせています。

 

以上のことから、自分でやりたいようにカスタマイズしやすいようなデザインのため、作っていてすごい楽しいんじゃないかと思います。

 

それなりにいいデザイン風にも見せることができるので (笑) みなさんもぜひ使ってみてはいかがでしょうか?

 

以上が「オビを敷くだけ」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその8。

こんにちは!最近YouTubeにハマっているカエデです。

 

「あるあるデザイン」アウトプットその8ということで、今回は「はみ出す勢い」です。

 

それでは早速僕が作ったデザインを見ていきましょう。こちらです!

 

f:id:kaedebook:20190718211509p:plain

 

題して「炭酸飲料"MelonShower"」です!

 

このように見出しになるような文字をはみ出すくらい大きくすることによって、ユーザーに伝えたい情報を目立たせることができます。

また文字だけに限らず、何をはみ出させるかがポイントになるそうです。

 

実際に作ってみて

 

インパクトを与えるのに絶大な効果があるかと思います。

 

しかし、作ってみるとスペースを広く取ってしまうのが厄介かなと思いました。

 

今回は炭酸飲料のWebサイトということで、弾けるような勢いを表現するために「はみ出す勢い」を使いましたが、案外インパクトを出すために使うのではなく、装飾としての役割も担えるのかなと思います。

 

今回僕が作ったデザインははみ出てはないんですよね。笑

 

そして、先ほどスペースを使ってしまうのが厄介と言いましたが、これを解消する方法があります。

 

それは本当にはみ出している文字を背景に使うというやり方です。

 

今回はユーザーに見てもらいたいキャッチコピーに「はみ出す勢い」を使ったので、実際にはみ出すことはできませんでしたが、装飾に使っても構わないような文字ならばはみ出てしまっても大丈夫かと思います。

 

なので意外と今回のような動きのあるデザインはもちろん、逆に静的でスタイリッシュなデザインにも背景としてかっこよく使えるかもしれません。

 

アイディアに困ったらぜひ使ってみてはいかがでしょうか?

 

以上が「はみ出す勢い」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその7。

「オビでリズム」

 

こんにちは!時々金縛りにあうことがあるカエデです。

 

「あるあるデザイン」アウトプットその7ということで、今回は「オビでリズム」です。

 

早速僕が作ったデザインを見ていきましょう。こちらです!

 

f:id:kaedebook:20190714211418p:plain

 

題して「ホラー映画"あの雨の日の君"」です...

 

このように見出しなどの文字に帯をつけることによって、文字と一緒に見えてくる長方形がアクセントになります!

また、整頓すればきちんと感が、バラバラに配置するとデザインにリズムを生み出すことができるのです。

 

実際に作ってみて

 

どのテーマにも取り入れやすいデザインだなと思いました。

 

今回はとりあえず怖い系のデザインをやってみたいなと思っていたのでこのテーマにしましたが、ぶっちゃけどのテーマでも使えるというのは「オビでリズム」のいいところなのかなと思います。

 

先にも書きましたが、

 

整頓すればきちんと感=スタイリッシュ、クール。

バラバラに配置するとデザインにリズム=子供向け、おもしろ系。

 

と、幅広いデザインに使うことが可能です。

 

なので、初心者の方や、本当にアイディアが思いつかなくなった時などはこのデザインを取り入れてみてもいいのではないのでしょうか?

 

以上が「オビでリズム」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその6。

「線で囲む」

 

こんにちは!最近「ぼくなつ」がやりたくなってきたカエデです。

 

「あるあるデザイン」アウトプットその6ということで、今回は「線で囲む」です!

線で囲むって結構普通じゃね?と思ったそこのあなた。まあ見てくださいな。笑

 

早速僕が作ったデザインを見ていきましょう。こちらです!

 

f:id:kaedebook:20190713211240p:plain

 

題して「アウトドアメーカー”FIGHTING”」です!

 

このように見出しの文字などを線で囲むことによって、より目立ち、読みやすさがアップすること間違いなしになります!

また、線で囲んだデザインを多用することによって、装飾としても成り立ってくれるというまさに便利なデザインなのです。

 

実際作ってみて

 

ただ線で囲むだけでなく、様々なバリエーションを加えて使うことができるなと思いました。

 

僕は今回のデザインを書籍で見たとき真っ先にスポーツブランドを今回のテーマにしようと思いました。

というのも...

 

f:id:kaedebook:20190713212812j:plain

 

このマンUイングランドのサッカーチーム)のユニフォームを最初に思い出したからです。笑

このころはクリロナもいたなあ。笑

 

まあこれはスポンサーのロゴなんですけどね!笑

 

それはさておき、スポーツとか、特にファッション系では線で囲まれることが多々あるので、今回はこれでクールに決めようと思いました。

 

ただ、今回特に注目していただきたいのはロゴではなく、"KEEP TRYING!!"と書かれている部分です。

線で囲んだ上から、その線で囲んだ面積を上回る大きさの文字が斜めにかかる...

 

めっちゃおしゃれじゃないですか!笑

 

これ書籍で似たようなやり方が載っていたので、「使ってやろ。」と思ってやってしまいました。笑

 

おしゃれなのももちろんいいんですが、そのインパクトが絶大で、より目立たせたいような文字(今回のデザインの場合はこのメーカーのコンセプトとして目立たせています)にこのデザインをするとめっちゃいいと思います!

 

また、「線で囲む」はもっといろんなバリエーションで使えるなと思いました。

 

実は今回「線で囲む」を多用して、それこそ装飾的な役割に回したデザインのサイトを作ろうかと迷いました。

 

今回は作れませんでしたが、装飾的な役割として使うときには、重ねたり、合体させたり、それぞれの色を変えたりと、いろんなバリエーションで使えるので、より面白いデザインができるのではないでしょうか?

 

皆さんも「線で囲む」をいろんなバリエーションで使ってみてはいかがでしょうか?

 

以上が「線で囲む」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

 

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその5。

「極太ライン締め」

 

こんにちは!二つだと思っていた口内炎が三つだったカエデです...

 

「あるあるデザイン」アウトプットその5ということで、今回は「極太ライン締め」です!

 

早速僕が作ったデザインを見ていきましょう。こちらです!

 

f:id:kaedebook:20190712222145p:plain

 

題して「茶店"AMERICAN COFFEE"」です!

 

このように文字間に極太のラインを引くことによって、それがアクセントになり、全体が締まって見えるのです!

また、黒だとコントラストが強すぎる場合は、色を入れると効果的になるそうです!

 

実際に作ってみて

 

すごいアクセントになるなあと思いました。

 

ラインは割と細くても目立ちがちになりますが、さらに太くラインを描くのでアクセントとしてはすごい効果があるかと思います。

 

ただ使う場面は限られてくるのかなと思います。

 

前回、前々回はスタイリッシュで清潔感があるようなデザインだったので、そういったデザインにはこの「極太ライン締め」は合わないかと。

 

ですが今回は喫茶店ということでフォント自体も太く、周りにも太めのラインを引いているので、より太いラインが合うような環境を作ることができたかと思います。

 

そういったテーマにはむしろ細いラインではなく、太いラインの方がアクセントにもなっていいかなあと思います!

 

ガツンと勢いをつけたいようなデザインを作りたいときは、この「極太ライン締め」を使ってみてはいかがでしょうか?

 

以上が「極太ライン締め」のアウトプットでした!

思ったこと感じたことありましたら、コメントいただけると幸いです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

 

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその4。

 

「文字間あけて整列」

 

こんにちは!生まれてこのかたゴキブリ好きな人に会ったことないカエデです。

 

「あるあるデザイン」アウトプットその4ということで、今回は「文字間あけて整列」です!

 

なんのこっちゃ?と一瞬思うかもしれませんが実際に見ていきましょう!

 

僕が作ったデザインはこちらです!

 

f:id:kaedebook:20190711210359p:plain

 

題して「石鹸株式会社 "FRESH SOAP"」です!

 

このように見出しとなるような文章の文字間を空けて整列することによって、ヌケ感を作り出し、よりスタイリッシュな印象にすることができるのです!

また、シンプルなレイアウトや、空間を大きく使ったようなデザインと相性がいいそうです。

 

実際に作ってみて

 

結構アリだなと思いました。笑

 

いや、ぶっちゃけ最初に本で見たときは「...ふーん。」ぐらいにしか思ってなくて。笑

 

「面白いけどデザインとしてはどうなんだろうなあ。」とか、「まあとりあえずつくってみたいなあ。」ぐらいにしか思ってなかったんですが、すみません。全力で謝りたいと思います。笑

 

今回は石鹸メーカーのサイトということで、”前回のアウトプットその3”よりもより清潔感が求められるようなテーマにしました。

 

ただ、この「文字間空けて整列」をすることによって、予想以上の清潔感が感じられるようなデザインになったので正直びっくりしました。

また、文字色を薄い黒、より灰色に近いようなカラーにしたのも効果があったのかなあと個人的に思っています。

 

今回は最初こそ戸惑いましたが、前回に比べたら迷うことなく制作することができたので、個人的に好きですね。笑

 

「清潔感やクールなイメージのデザインを作りたいんだけどもうひと押しが足りない〜」ともがき苦しんでいるそこのあなた。

 

文字間あけて整列」があるじゃないか。

 

ということで。ぜひ、皆さんも使ってみてはいかがでしょうか?

 

以上が「文字間あけて整列」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその3。

 

「まわり余白最高」

 

こんにちは!現在口の中に二つの口内炎を持つ男カエデです...

 

「あるあるデザイン」アウトプットその3ということで、今回は「まわり余白最高」です。

 

早速僕が作った作品を見てみましょう!

 

f:id:kaedebook:20190710210412p:plain

 

題して「Cosmetics Line」です!

 

このように中央に画像などのまとまった内容を配置することによって、余白を生み出し、大人の余裕や清潔感、高級感を出すことができるのです!

また、周りの余白部分を薄い配色にすることによって、抜け感をさらにアップすることができます。

 

実際に作ってみて

 

案外難しかったです。笑

 

これは単に僕の実力不足ということもありますが、(笑) 余白部分をどう有効的に使っていくかを悩んでしまい、試行錯誤を繰り返す時間が長かったです。

 

ただ結局今回は余白を潰さないように意識して制作しました。

 

文字を入れることは決めていたので、大きく入れるかも迷いましたが、小さめで余白を大きく残しているかと思います。

 

またヘッダーメニューも最初からは表示せず、余白を存分に使う形を優先しました。

 

なので、実際作り終えてみると清潔感のあるWebサイトのデザインになったんじゃないかと思います!

 

今回のテーマはメイク用品のサイトということもあって、やっぱり清潔感だったり優しいイメージのあるデザインにしたかったので、そういうサイトを作りたいときには「周り余白最高」を使ってみるとすごい効果があるかと思います!

 

実際の書籍にはしっくりくるようなデザインの例がちゃんと載っていますので、本を一回でも読んでみてほしいです!

 

皆さんもアイディアに困ったらぜひ使ってみてはいかがでしょうか?

 

 

以上が「まわり余白最高」のアウトプットでした!

思ったこと感じたこと、なんでもいいのでコメントいただけると嬉しいです!

 

また、僕自身のポートフォリオサイトをこちらのURLから見れますのでそちらのほうもよろしくお願いします!

https://kaede-portfolio.herokuapp.com/

 

最後までみていただきありがとうございました!

 

追記...

やっぱこっちの方がいいかも。笑

f:id:kaedebook:20190711101115p:plain



 

デザインのアイディアに困っている人必見!書籍「あるあるデザイン」のアウトプットその2。

「ちっちゃい文字飾り」

 

こんにちは!歯医者に行くといつも歯の磨き方をボロクソ言われるカエデです...

 

「あるあるデザイン」アウトプットその2ということで、今回は「ちっちゃい文字飾り」です。

 

早速僕が作ったデザインを見ていきましょう!こちらです!

 

f:id:kaedebook:20190709183146p:plain

 

題して「Pop artist "TRIPLE SINGER'S"」です!

 

このように文字飾りを周りに散りばめることによって、こなれた雰囲気を出すことができるのです。(文字の意味も特に気にしなくていい場合が多いので楽ですね。笑)

 

実際に作ってみて思ったことは、文字飾りをつけるだけでおしゃれな雰囲気になるということです。

 

今回は女性アーティストのWebサイトということで、芸術性とかおしゃれな感じが必要になってくるかと思います。

なので、文字飾りを入れるにはうってつけだと思ってこのテーマにしました。

 

でもこれだけが理由じゃないんです。笑

 

実は「海外のアーティストのジャケットのデザイン」がすごい好きなんです。

特に"The Chainsmokers"のジャケットは最高におしゃれだと思います。(僕の大好きなアーティストです。よかったらググってみてくださいな。笑)

 

f:id:kaedebook:20190709185141j:plain
f:id:kaedebook:20190709185220j:plain


よくないですか!?笑

誰か共感してくれると嬉しいです。笑

 

なので実際、「自分もこういうの作りたい...!」っていう思いで作った感もあります。笑

 

僕のデザインを見てもらうとわかるかもしれませんが、大きな枠の中に文字を入れて中央にロゴを配置するという、ジャケットでは結構あるあるなデザインです。笑

 

ただここで一つ問題が発生します。

 

ジャケットとWebサイトではサイズが違う。

 

そう。ジャケットは面積が小さいのでいいかもしれませんが、Webサイトでは面積が広いので枠内が寂しい印象になってしまうのです。

 

そこで!

 

ちっちゃい文字飾り」です。

おしゃれな雰囲気を保ったままスペースを埋めることが可能になります。

また、文字を縦にするなどの変化を見せることによって、アーティストの遊び心なども表現することができてしまうのです!

 

なんて便利なのでしょうか「ちっちゃい文字飾り」!

 

皆さんもアイディアに困ったらぜひ使ってみてはいかがでしょうか?

 

以上が「ちっちゃい文字飾り」のアウトプットでした!

思ったことや感じたこと、なんでもいいのでぜひコメントください!

 

また、僕自身のポートフォリオサイトを上のURLから見れますのでそちらのほうもよろしくお願いします!

 

最後までみていただきありがとうございました!