最終更新日:2024年05月15日
デザイナーとして活躍していると、「なんかデザインがダサい気がする」「レイアウトが崩れてしまう」「苦手な部類のデザインがある」など、さまざまな悩みに直面する方もいらっしゃるのではないでしょうか。
こちらのページでは、そんな悩みを解決に役立つ記事を紹介します。ぜひ一読して、日々のデザインに活用してみてくださいね。
※尚、こちらはPR記事ではございません。編集部が独自にテーマを選び、サイト担当者に許可を頂いて作成している記事です。また、記載中の内容は、執筆時の情報になります。
簡単60秒!あなたにピッタリの案件が届く
無料会員登録京都市伏見区にてホームページ制作をメインに活動している、個人事業主のNotiQuo(ノティコ)さん。これまで、企業のホームページリニューアルや支援サービスのLPデザイン、支援ツールのロゴ制作などを手掛けた実績があり、培ってきたWebデザインのスキルとアイデア力を武器に、クライアントの「困りごと」を解決してきました。
運営する事業サイトに掲載中の記事《なぜダサい?デザイン改善のポイント!》では、NotiQuoさんがWebデザイン初心者だったころに作成したサイトを用いて、何が原因でダサく感じてしまう仕様となったのかを追求しています。
当時は思いもよらなかったことが、経験を重ねた今だからこそ気づけた部分もあったようで、そのダメ出しと解説が絶妙に腑に落ちるので、まさにデザインに悩んでいる方は参考になるのではないでしょうか。
記事には、現在のNotiQuoさんが手直しする前と後のサイトの画像が貼られており、見比べられるようになっています。
その2つの画像を見ると一目瞭然で、NotiQuoさんはどこがどうダサいと感じて、どう改善するべきなのかポイントを5つを挙げ、それぞれ解説。
たとえば、当初作成したサイトは、ヘッダーまわりの余白の取り方が甘く、ヘッダーが縦に長くなっているため素人っぽく見えるといいます。
ところが、ヘッダー上部の無駄な余白を取り除き縦幅を小さくしたことで、劇的にスッキリとした印象になりメイン画像が目立つように改善されました。
同様に、コンテンツ間やアイテム間の余白の取り方も調整し、隣接する要素との兼ね合いも考慮してデザインする必要があるとのアドバイスが綴られています。
そのほかにも、ドロップシャドウやグラデーションの使い方、画像の縦横比の変更、フォントの選び方と使い方についても工夫するポイントが記されているので、記事にて詳細をチェックしてみてはいかがでしょう。
サイトの作成だけでなく、デザイン全般で活かせる当該記事のコツ、ぜひ業務で役立ててくださいね。
■なぜダサい?デザイン改善のポイント!
https://notiquo.com/blog/web-creation/design-before-after.html
トップページ
https://notiquo.com/
簡単なようで難しいといわれることが多いバナーの作成。バナーデザインで大事なことは「ユーザーが思わずクリックしたくなるかどうか」です。
バナー作成のポイントをもう一度しっかりとインプットしたい方は、《バナーデザインの作り方のコツ・定番レイアウト♯001》という記事をぜひご一読ください。
こちらの記事を発信しているのは、MIURA design office(ミウラデザインオフィス)の三浦さんです。『デザイン部』というブログページにて、新しい視点を取り入れたデザイン関連の記事を多数掲載しています。
当記事内では、効率よく制作できるデザインの基本手順とコツを紹介。アイデアのヒントとなる定番レイアウトの使い道を伝えています。
作成のコツで例に挙げているのは、ECサイトの「セールバー」です。手を動かす前に行うべきポイントとして、要件整理の重要性と進め方について複数の項目を提示。丁寧に説明されているので、しっかりと理解を深められることでしょう。
要件整理の次に押さえておくべきポイントとして、以下4つのステップを紹介しています。
・Step.01 テキスト要素の洗い出し
・Step.02 優先順位を考える
・Step.03 写真や背景を挿入
・Step.04 ちょっと遊び心をプラスして完成!
Step.02では、「バナーをどのように見せるべきなのかを考える」ことに着目し、どのように優先順位を付けたら良いのかについて詳細に記述。また、ほかの項目では、文字のサイズ感や文字情報の強弱など、全体的な見た目のデザインを意識した作成のコツも伝えています。記事の最後では、4つのステップで取り上げた「SALE」のデザイン例の比較として、「50%OFF」を強調させた場合のデザインも確認できます。ぜひご自身の目で比較してみてはいかがでしょうか。
バナーデザインは「作れば作るだけコツやアイディアの引き出しが増える」とのこと。試行錯誤を重ねることで、初心者の場合は特にデザイナーとして成長する良い機会となるでしょう。
■バナーデザインの作り方のコツ・定番レイアウト♯001
https://miura-designoffice.com/2022/09/16/banner-design/
Webサイトやフライヤーなどを作成する場合、読み手が視覚的にイメージを捉えられるように、写真を差し込むことがあります。
ただ、せっかくそのほかのデザインが申し分ないくらいに上手く仕上がったとしても、差し込んだ写真によって台無しにしてしまうことも…。
Webデザイナーの中には、そうした写真の貼り付け方について悩ましく思っている方もいるかもしれませんね。
そこで、ぜひとも読んでいただきたいのが、現在フリーランスデザイナーとして活躍中のマムさんが運営するブログ『マムタグ』。
ブログには読み応えある記事が揃っていますが、今回はこちらの《たくさんの写真をかっこよくレイアウトするコツと手順》という記事に注目してみました。
当該記事では、まさに写真を見栄え良く配置したいけど悩んでいるという方向けに、写真のレイアウトのコツとその手順について紹介されています。
マムさんによると、写真をレイアウトするコツは大きく分けて3つあるのだとか。
たとえば、写真の大きさや色、明るさ、トリミング、余白、ページごとの写真点数において、しっかりとメリハリを付けることが重要なポイントだといいます。
その作業ひとつでどのような違いが出てくるのかを比較できるよう、記事にはメリハリを付ける前後の写真を掲載し、わかりやすく解説してくれています。
また、「決まりを決める」ことや「流れを作る」ことも写真をレイアウトするうえで欠かせないポイントのようです。
ほかにもプロのデザイナーとしての視点から、作業に取り掛かる前に実践すべきことや、レイアウトの手順のコツなどにも言及。
これらの詳細な情報については、記事にてご確認ください。そして、アドバイスを参考に実践してみてはいかがでしょうか。
■たくさんの写真をかっこよくレイアウトするコツと手順
https://momtag.net/layoutonokotsu/
トップページ
https://momtag.net/
ゲーム業界のデザイン職で活躍しているFoxEyeさん。趣味やブログでよくキャラクターを描いていますが、いつも色選びに悩んでしまうそうです。そこでFoxEyeさんは、色選びについて改めて勉強したとのこと。こちらでは、その時勉強記録である《【キャラクターデザイン&描き方】色をどうやったら選んだらいいか分からない時の配色の考え方と方法とは?》という記事を紹介します。
記事では、キャラクターデザインの配色の考え方と実際の配色方法について、参考にした本の内容に沿いながら紹介しています。
FoxEyeさんはキャラクターの配色を考える際、これまでは色を適当に選んでいたそうです。しかし、今回勉強してみて改めて「色選びの基準を決めること・配色のバランスを考えることが大事」ということが分かったと話しています。
FoxEyeさんは、キャラクターデザインの色選びの考え方について以下のように解説しています。
・色はトーングループを限定して選ぶことで迷いが減り、イラスト全体の色味がまとまる
・色はモチーフから決める方法、使いたい色から決める方法、類似色で決める方法がある
・色はメインカラーとサブカラー、アクセントカラーの配色バランスをとる
記事本文では、上記の詳しい内容について、図やイラストを用いて分かりやすく説明しています。色の配置のコツや配色の考え方などをより詳しく勉強できるため、キャラクターの配色で悩んでいる方はぜひ記事本文をチェックしてみてくださいね。
また、FoxEyeさんのブログ『UnlimiteDream』では、キャラクターの描き方はもちろん、3DCGに関する記事やデザインツールに関する記事なども掲載中です。気になる方はぜひ、ブログを訪れてみてはいかがでしょうか?
■【キャラクターデザイン&描き方】色をどうやったら選んだらいいか分からない時の配色の考え方と方法とは?
https://unlimitedream.com/2022/01/22/howto-choose-characterdesign-clolor/
トップページ
https://unlimitedream.com/
デザインを作成するとき、いつも自分の好み通りに作成できるとは限らないですよね。
クライアントから希望や要望を受けてデザインする際、場合によっては得意としないデザイン作成を依頼されることもあるかもしれません。
しかし、そのような場合でも、さまざまなデザインの知識を持っておくと安心です。
そこで今回は、ポップなデザインに焦点を充てた記事《可愛い「ポップ」なデザイン作成のアイディアとヒント》をご紹介します。
一般的に「賑やか・明るい・元気」などのイメージがあるポップ。こちらの記事では「可愛いポップなデザイン」を表現するアイデアとヒントが解説されています。
ナナさんが『デザナビ』というブログで書いた記事によると、ポップなデザインにはまずは「彩度が高めの配色」が大切とのこと。
記事の中では、「彩度を高めて鮮やかな配色で表現することで、派手で明るい印象=ポップな表現が可能になります。ポップデザインは配色が重要!!」と言及。
彩度が高い色を選択することで、可愛い、ポップな印象を表現しやすくなるそうです。
次に、パターンやイラストの大胆な使い方にも言及。
ドットとイラスト、それぞれのパターンを背景にしたデザイン例を用いて分かりやすく説明しています。
ドット・ストライプ、そしてイラストは、ポップデザインととても相性が良いそうなので、ぜひ参考にしてみましょう。
そのほか、記事では文字の装飾も画像付きで説明。
黒フチや版ズレ、多重、色影などを同じ「POP」という文字で比較しています。
加えて、ポップなフォントについても解説されているので、こちらも併せてチェックしておきましょう。
記事の最後には、写真のトリミングの工夫についても紹介されており、こちらも画像を用いて説明されています。
「ポップってなんか苦手なんだよな…」そんな方にぜひ読んでいただきたい内容なので、チェックしてみてくださいね。
■可愛い「ポップ」なデザイン作成のアイディアとヒント
https://wkwkdesign.com/pretty-popdesign-idea-tips/
簡単60秒!あなたにピッタリの案件が届く
無料会員登録 希望にあった案件が
すぐに見つかる
掲載数は290,000件!
あなたにピッタリの
フリーランス案件が見つかる
129万件以上のフリーランス案件から一括検索
297,327件※の案件を保有しており、エンジニアやクリエイター向けを中心にたくさんの案件を一括検索可能です。
※ 10月9日(Wed)更新2あなたの経験やスキルに適した案件をメールでお知らせ
マイページに入力して頂いた経験や希望条件に合わせて、ご希望にマッチした案件をメールでお送りするので効率的な案件探しが可能です。
Webデザイナーにとって「色」はとても重要なデザインのポイントでもあります。特に色の使い方やデザインの違いによって全く違った印象に仕上がるこ...
最終更新日:2024年09月04日
SEOは[Search Engine Optimization(直訳すると「検索エンジン最適化」)]の略称です。具体的には、検索結果の上位表...
最終更新日:2024年08月05日