chouchou

未経験からWEBデザイナーを目指すfuyu_naのブログ

WEBデザイン

【本の紹介】これからWebデザイナーになりたい方におすすめの本を紹介します。

こんにちは、fuyu_naです。 私は今年の7月から独学でWebデザインの勉強を始め、バナーやWebサイトのデザイン制作に取り組んだり、アウトプットを続けた結果、11月頃から少しずつお仕事依頼が頂けるようになり、一緒に働こうというありがたいお誘いも頂けるよ…

【Illustrator】密かにイラレ勉強会を開催しました。(+バナー模写)

昨日、先輩デザイナーのGitaさんとアロードさんとイラレ勉強会をしました! イラレを使い始めて数日の私がわからないところ(むしろほぼ全て)をお二人にZoomで画面共有しながら教えて頂きました。感謝しても感謝しきれない、最高に私トクな会でした。 話は…

バナーコンペで落選して得た学び【法律事務所編】

先日、法律事務所のサイトへ誘導するバナーのコンペで提案したのですが、残念ながら採用ならずでした。他の方々のバナーから学ぶことがたくさんあったので、今後に活かすために記録しておきます。 (明瞭な画像は依頼者様の希望で表示できません) まず、今…

#バナーお題 Vol.3 に挑戦してみた

今回はTwitterで実施中の #バナーお題 Vol.3 に挑戦したので、制作したバナーについて書きました。 そもそも「バナーお題って何?」という方は、前回の記事をご参照下さい。 今回のお題は遊園地の開園記念を宣伝するバナー! #バナーお題 vol.3✍️遊園地Kobay…

初心者こそ現役デザイナーの方と積極的に交流した方が良いと思った話【ポートフォリオを作る会の感想】

昨日、Twitterで知り合ったくりはら@デザイナー (@kuri_takayu)さん主催の「ポートフォリオ(完成度30%を目指す)を作る会」に参加しました。 自分にとってはとても充実した貴重な時間だったので、鮮度が高いうちに感想をまとめます! 「ポートフォリオを作る…

【Twitter】ヘッダー画像の推奨サイズと切れる範囲についてまとめてみた。

今朝からもくもくと自分のTwitter用ヘッダー画像を作ってました。 今回制作したヘッダーが以下の画像です。(結果的にはボツデザインでした) それにしてもアイキャッチとヘッダーのコントラストがすごい…! 完全に自分の好みでやりたいことを詰め込んだだけ…

#バナーお題 Vol.2 に挑戦してみた

10月末に挑戦した「 #バナーお題 」 第2回目の課題発表があったので、前回に引き続き挑戦してみました。 「#バナーお題」とは? twitter上でこばやす独学Webデザイナー (@kobayas_s)さんがバナーのお題を出してくれて、そのお題に沿って各々がバナーを作って…

twitterの「#バナーお題」に挑戦してみた

twitterで密かに盛り上がっている「#バナーお題」という面白そうなタグに挑戦してみました。 ▽▼まずはこちらが課題のツイート▽▼ 実際に作ってみたバナー イメージカラーは「白、水色」のお題でしたが、これはアウトでしょうか() 下の日付と特別価格の部分が…

バナー模写 #29.YAHOO! 資格取得・キャリアアップ

バナー模写を再開します。 今までは「模写すること」に一生懸命になっていましたが、これからは「デザインの観察」を中心に取り組んでいきたいと思います。 time:40minsize:300×250tool:Photoshop 全体的に清潔感があってフレッシュな印象。メリハリと安…

Webデザインのトレース #6.Lecole Blanc

今回は、フラワーアトリエ「Lecole Blanc」さんのWebデザインをトレースさせて頂きました。 お花を扱うアトリエということで、女性向けの落ち着いた上品なデザインでした。 デザインの観察 大きなメインビジュアル まずは2500×1200pxの大きなメインビジュア…

Webデザインのトレース #5.My Home,My Starbucks

今回は、スターバックスさんのWebデザインをトレースさせて頂きました。 My Home, My Starbucks のランディングページです。基本はAdobe XDを使用し、一部のパーツはPhotoshopで編集しました。 選んだ理由 スターバックスが好きだから。 手書き風のデザイン…

Webデザインのトレース #4.島の病院おおたに(2)

今回は、島の病院おおたにさんの「診療科ページ」です。 トップページがシンプルで素敵なデザインだったので続けてトレースしてみました。 デザインの観察 TOPページ以外で共通のデザイン ヘッダー、ナビゲーション、背景、フッターはトップページ以外のペー…

Webデザインのトレース #3.島の病院おおたに

今回は、こちらの「島の病院おおたに」さんのWebサイトをトレースさせて頂きました。 選んだ理由 パノラマ写真と海を連想するBGMに惹かれた シンプルで目的にたどり着きやすいデザイン 医療機関のWebサイトに興味があった デザインの観察 パノラマ写真を使っ…

Webデザインのトレース #2. ハルイロ歯科クリニック

今回は、ハルイロ歯科クリニックさんのWebサイトをトレースさせて頂きました。 左がお手本、右がトレースです。Photoshopを使用してます。 選んだ理由 良い意味で医療系施設のサイトに見えなかった 診療情報や予約の部分がシンプルでわかりやすいデザイン セ…

初めての「Adobe XD」で簡単にWebデザインができた

今までPhotoshopを使ってWebサイトのトレースをしていましたが、1サイトに時間がかかり過ぎて全然数がこなせませんでした。 そこで、効率化のために Adobe XD を使ってみました。 XDを使うきっかけになったのは、以下の記事です。使用方法がわかりやすく書か…

Webデザインのトレース #1. napla

9月に入ってWebデザインのトレースを始めました!いろんな記事を参考にしつつ手探りで勉強中です。時間はかかるけど学べることがたくさんあって楽しいです!アウトプットの練習と記録用にトレース結果を記事にしてみようと思います。 今回は「napla」さんのW…

デザイン未経験者がバナー模写を1ヶ月間やってみてわかったこと

8月にバナー模写をはじめ、1ヶ月間続けることで得たものが多くありました。率直に言って、「デザイン未経験者こそバナー模写をする価値がある」と思いました。 そこで今回は、デザイン未経験者の私が「バナー模写」を1ヶ月間やってみてわかったことについて…

バナー模写 #28.30%OFF coupon

time:40mintool:photoshop パターンに色をつける方法が今まで理解できてなくて、試行錯誤した結果、時間がかかってしまいました。最終的に手探りでは限界!ということで、下記サイト様のお世話になりました。 フォントに統一感がなくて反省してます。こう…

バナー模写 #27.つくる。みんなのTシャツ。

time:不明tool:Photoshop 作ってあったけどアップしてなかったものを発見しました。そのため所要時間は不明です。確か時間があまりとれない時に、「1日1個は練習!」と思って模写したものです。 ビビットな黄色が目立つ、派手でアクティブな第一印象です。…

バナー模写 #26.CLEARANCE SALE

time:40mintool:photoshop シンプルだけど目立つビジュアル。「2つ買ったら10%OFFですよ」って文字をわざわざ読まなくても、視覚的にすぐ理解できます。 メインのフォントは全体的に細めのサンセリフ体で構成されていて、女性的かつ都会的な印象を受けます…

バナー模写 #25.EXTRA 30% OFF

time:40mintool:photoshop ミントカラーにドット柄のフォントが可愛いバナーです。全体的に余白が大きくて余裕のあるデザイン。 模写の方は『30』のフォントが小さい気がします。フォントが小さいからか、合わせたはずの枠線の太さも太く見えてしまいます…

バナー模写 #24.SUMMER SALE!

time:40mintool:photoshop アウトラインのあるフォントが相変わらず好きです。少しずらしてる感じがポップでまた可愛い。動きのある切り取り写真を入れることで楽しい雰囲気になっています。ロゴを少し傾けることでさらに動きが出ました。 記事を書いてる…

バナー模写 #23.眼鏡市場

time:25mintool:Photoshop サングラスの色が違うだけで、大きく異なる印象。原本の方が軽くてかわいい感じに見えます。画像選びも大切。

バナー模写 #22.スカパー!

time:30mintool:photoshop ロゴを作るのに時間かかりそうでしたが、思ったより早くできました。前回、前々回のものとはまた雰囲気が違うけど、こういうはっきりしたデザインも好きです。

バナー模写 #21.楽天カード

time:80mintool:Photoshop とってもかわいくて好きなデザイン。こういう明るくてポップなバナーが特に好きです。ただすごく時間がかかりました。特にリボンと「8,000」の部分。大変だったけどやっぱり好きなものを作れるのは楽しいです。

バナー模写 #20.CLUB Panasonic

time:40mintool:photoshop 一瞬でT-POINTの宣伝だとわかる配色が素晴らしいです。画像がなくてシンプルに見えるけど、いろんな要素が入っている。多くの要素がバランス良く配置されていて、ごちゃごちゃしていない。 全体的に楽しく模写できました。

バナー模写 #19.FELISSIMO 秋のオトナ服

time:80mintool:Photoshop いつも逃げてしまう写真を今回は入れてみました。写真を入れる作業をしただけで、とっても達成感があります。写真の加工にもっと時間がかかると思いましたが、案外簡単にできて驚きました。上達している…のだと思いたいです。 左…

バナー模写 #18.MUSEE PLATINUM

time:60minTool:Photoshop 色々と残念な結果だと反省しております。 水色×ピンク×白の配色がとてもかわいいMUSEE PLATINUMさんのバナーです。「女の子!」って感じが伝わってきます。 文字はなぜカクカクしているのでしょうか?雲のようなシェイプは手書き…

バナー模写 #17.CLINIQUE

time:30mintool:Photoshop 色の数や変化が少ないバナーは最初よりも早く作れるようになってきました。 模写の方はフォントのウェイトや色によるものか、どこか印象が薄いです。「瞬時に、カバー。」の文字が明らかに弱いですね。 これまでバナー模写してき…

バナー模写 #16.白潤の部屋

time:40mintool:Photoshop 吹き出しやシズクなど、今まで作ったことがなかったので挑戦してみました。シェイプは使ったことなかったですが便利ですね。色々な種類があると分かったので、また幅が広がりそうです。 フォントの違いで印象が違う模写になりま…