こんにちは!佐賀県の田舎で未経験からフリーランスWebデザイナーになった福浦です。
現在は、地元や全国の個人事業主の方から従業員が5名未満の中小企業様のデザインを制作しています。
大卒で初めて入社した大手通信事業代理店で携帯販売をしながら、店内POPや販促イベントなどの企画を担当していましたのでIllustratorを使用して日々のデザインを作成していたこともありましたがフリーランスWebデザイナーになると決めてきちんと学び始めたのは2020年からです。
オンラインスクールデイトラで学びながら手を動かし添削を受ける日々を過ごしていました。カリキュラムもアップデートされるため、一度購入すると一生学べるようになっています。

そこで今日は久しぶりに、Webデザインコース初級編にある課題をやってみました。バナーを作ることも見ることも大好きでトレースもよくしていました。何かを買う、申し込む、初めのアクション、心が動く初動のきっかけになることが多いバナーの魅力を感じます(灬 ˘³˘灬)~
ということで、実際に作成したバナーも載せながら、作成ポイントや、初心者感を出さないポイントなども書いていこうと思います。
オンラインスクールデイトラ初級コース課題
お題はブログに貼るLINE登録催促バナーのデザイン
まずは以下のような課題概要をもとに制作するという流れです。スクールでは事前に課題とヒアリングした結果を提示されて制作するといった流れが多いかと思うんですが、実践では「貴方がこれらを聞き出さなければならない」ということです。
スキルアップしデザインの4原則も使いこなせるようになると、制作事態の時間はどんどん短縮されていきます。私はデザインを学び始めた頃バナー1枚作るのに6時間以上かかっていたにも関わらず、4年目の今現在1~2時間程度で作成できるようになりました。ではどこに時間をかけ重きをおいているかというとヒアリングです。
サイズもどのくらいがいいだろう?ロゴ使ったほうがいいでしょうか?という相談から始まるクライアント様もいるということ、Web集客導線から一緒に考えることだってあります。これらを課題をこなす時から意識することが大事です。それが実践的な学びと練習、提案力を身につけると私は思います。
では課題の概要については以下になります。
- サイズ:正方形(600px×600px)
- 目的:公式LINEの登録
- ターゲット:20~30代男女
- 伝えたい雰囲気:シンプル
- カラー:特になし
- クライアント要件:ロゴを使ってほしい(改変OK)、他素材サイト使うなど何してもOK
実際に制作した完成バナーはこちらです。

デザイン意図:LINEとわかるようにLINEのアイコンとLINEカラーの緑をメインに使用しました。公式のガイドブックから、カラーコードは#06c755です。
シンプルというのが要望だったため、ターゲット20~30代男女が使うスマートフォンイラストもロゴに合わせた黒の線画を使用しました。
作業期間: 1.5時間 使用ツール: Figma
デザインに入る前に準備すること
タイトル、詳細、CTAといったグループにわけ、何を一番訴求したいのか明確にするためテキストに優先順位をつける。デザインの4原則を使い整列のルールを左寄せ、反復できるテキストやグループが同じ仲間を近接させる。優先順位の高いタイトルを強、優先順位の低いものを弱にする。
▼ 課題に記載するテキスト
無料
デザ研(デザイン研究所)公式LINEはじめました
役に立つコラムを不定期配信!
登録特典音声もある!
クリック
ロゴ素材

デザインの4原則を理解するだけではなく、実際に手を動かしデザインに活かすことが大事です。デザインはセンスなくとも知識と理論で作成可能なんです!始めたばかりの皆さん、諦めずに頑張ろう!
身近なものでデザインの4原則を見つけてみる
頂いた名刺や、ポストに入っているチラシ、教科書、canvaのテンプレートを見ながら、これは整列?これは強弱?といった使われている箇所を見つけて、自分なりに理由を見つけてみることを練習するとデザインの引き出しも増えます。私はもともとチラシを見ることが好きだったこともあり今でもよくやっています。
この名刺、頑張って自分で作ったんだろうな、、、→デザインの4原則の整列さえ知っていたらもっとよかっただろうな!なんて思うことは多く、デザイナーじゃない方にもデザインの4原則を知って欲しいなぁと思っています。
デザイン制作時の3つのマイルール
- ゴシック体を使用する
- カラーは2色+文字色
- 色は自作しない



意外とこれを守れないことで初心者感から抜け出せないことを学んだ私のたったの3つのルールです。意外と重宝するルールですので皆さんも参考にしてみてください。
他にも、文字を無駄に袋文字にしない、とかドロップシャドウをつけすぎない、フォントの種類を分けて多く使わない、これやるとあかんやつ!っていうのはありますが意外とシンプルにFigmaでできる全てを駆使せずとも伝わるデザインは作れるんです。そこをまず知ってほしいんです!
まとめ
- デザインの4原則を守る
- マイルールを決める
- 制作物の概要はヒアリングしないと出てこない
- 特別な操作不要でも伝わるデザインをまずは作る
今日はデイトラの課題を久しぶりに行いました。案件が終了し束の間の時間も手を動かすことを辞めたくない!タイプの私は時折、課題を何往復もやったりしますがやっぱり楽しい(✿˘艸˘✿)
課題は最後まで作って私のようにブログや、SNSで成長過程を残しておくことをオススメします♩デイトラ仲間はXでの投稿が盛んのようですよ!
本日紹介したオンラインスクールデイトラに興味がある方はこちらから⇩
子育てしながらでも私のようにオンラインで学べます。


デザインのご依頼は個別オンライン相談でお受け付けしています。
Laughing designでは、Web集客を活かすSEOに強いホームページ制作を作ること、そして何よりビジネスを言語化し本質の課題解決に向き合うヒアリングの時間を大事にしています。
知り合いのデザイナーもいないし、制作に迷っている、誰に相談していいかわからない方は、ぜひ一度無料相談にお越しください!
ホームページのご依頼があっても今のビジネスフェーズで必要なのか、名刺が必要なのか、web上でのLitlinkの方がいいかもしれない、という具合に、お悩みや課題に対する解決手段にデザインがあると思っていますので、



依頼が来たからお見積もりをし制作する、だと効果は得れないと思っています。せっかく作ってもらったのにホームページの活用ができていない。とならないためにもまずは事業の状態や、経営者様のお悩みを聞く場として個別相談を設けております。お気軽に無料相談にお越しください