もっとデザインの幅を広げたい方にオススメ◎デザインのヒントになるブログ記事まとめ

デザインの仕事をしていると、「いいデザインが思い浮かばない」「デザインがうまく行かない」「似たようなデザインばかりになってしまう」という悩みにあたる方もいらっしゃるのではないでしょうか。

この記事では、「もっとデザインの幅を広げたい！」という方にオススメのブログ記事を紹介しています。

他の方のデザインのヒントに触れることで、新たなデザインのアイデアが思い浮かぶかもしれません。この記事を読んで、デザインの引き出しを増やしませんか？

※尚、こちらはPR記事ではございません。編集部が独自にテーマを選び、サイト担当者に許可を頂いて作成している記事です。また、記載中の内容は、執筆時の情報になります。

【Illustrator 】簡単に文字をカットする方法！ デザインのワンポイントに（SHU BLOG）

ロゴや見出しなどをデザインするとき、「なんだか単調でつまらない…」と思うことはありませんか？
そんなときは、ロゴの文字の一部をカットしたり色を変えたりしてみると、デザインのアクセントにつながるかもしれませんよ。
今回は、SHUさんが運営する『SHU BLOG』より《【Illustrator】簡単に文字をカットする方法！ デザインのワンポイントに》を紹介します。

文字カットに使用するソフトはIllustratorです。Illustratorを勉強中の方や、パスファインダー・フォント加工のやり方を覚えたい方も参考になると思いますので、ぜひお試しください。

作業手順は以下の通りです。
1.文字をアウトライン化します
2.切り抜き線を入れます
3.パスファインダーの分割を使います
4.パスファインダーの分割後、グループ化を解除し、余計な線を削除します
5.色を変更する場合は「ダイレクト選択ツール」を使用して色を変更します
これで完成です！

記事では、上記の詳しい説明や図解、ショートカットキーが記載されています。また、パスファインダーの分割を用いた別の使用例を図で分かりやすく紹介していますので、ぜひ記事で確認してみてくださいね。

SHU BLOGでは、HTML/CSS、jQueryのTips記事や、配色パターンの参考になる記事なども読むことができます。Webサイト制作に困ったら、ぜひSHU BLOGを参考にしてみてはいかがでしょうか？

■【Illustrator 】簡単に文字をカットする方法！ デザインのワンポイントに　記事詳細
https://shu-naka-blog.com/website/font/
トップページ
https://shu-naka-blog.com/

アイコンの基本的な役割と使い方（DUB DESiGN）

アイコンは、機能や行為、情報、目的などを視覚的に表現したもので、文字よりも少ないスペースで直感的にその意味を伝える効果があります。情報を補完してくれる役割を果たすアイコンですが、使い方次第でユーザーに間違った認識を与えてしまう可能性があるため、注意が必要です。

今回、インハウスデザイナーのかかかずさんが運営するブログ『DUB DESiGN』より《アイコンの基本的な役割と使い方》という記事を紹介します。

記事では、アイコンを使用する際の注意点が以下のように書かれています。
・馴染みのないアイコンにはテキストで補完する
例えばハンバーガーメニューの場合、近くに「MENU」と記載することでアイコンの意味が明確になります。
・アイコンはテキストの左側にレイアウトし、適度な余白を取る
一般的に人の視線は左から右に流れるため、左にアイコンを配置することでテキストと合わせて認知されます。
・あえて文字のみにするほうが分かりやすいこともある
アイコンから伝わる意味がいくつもある場合や、アイコンとして表現しにくい場合などは、アイコンの使用は控えるようにしましょう。
・トンマナとの統一感を図る
メニューで利用されるアイコンの場合、フルカラーなどで強調してしまうと視点がそちらに引っ張られてしまうため、アイコンのディテールや全体を見ながら調整しましょう。

記事では、個人・商用で利用できるアイコン素材サイトを複数紹介しています。
シンプルかつスタイリッシュで利用しやすいアイコン素材を厳選して紹介しているので、アイコン探しでお悩みの方は、ぜひ記事の中から探してみることをおすすめします。

また、かかかずさんのブログ「DUB DESiGN」には、Webサイト制作やUIデザイン、Webマーケティングなどに関するお役立ち記事のほか、Webサイト制作で使えるユニークなスニペットの紹介記事などもあります。興味がある方はぜひ、「DUB DESiGN」をチェックしてみてはいかがでしょうか？

■アイコンの基本的な役割と使い方　記事詳細
https://dubdesign.net/web/ui-design/icon-use-howto/

【1年前と比較】webデザイナーの想いを込めたブログバナー(アイキャッチ)作りのポイント（My Design Blog）

サイトの企画やコーディングなどデザイン以外でも幅広い業務を行うWebデザイナー。Webデザイナーとして活躍中の方の中には、ほかの業務が忙しくてデザインに集中できない…と悩んでいる方も多くいらっしゃるのではないでしょうか？

今回ご紹介する『わたしのデザインブログ』を運営するWebデザイナーのshioさんも、コーディングの仕事が多い時期は、あまりデザインする機会がないとのこと。しかし、shioさんは「ブログのバナー（アイキャッチ）を作ることでデザインの勉強をするようにしている」のだとか。こちらの記事《【1年前と比較】webデザイナーの想いを込めたブログバナー(アイキャッチ)作りのポイント》では、筆者がこれまでに勉強も兼ねてデザインしたブログのバナーの振り返りが綴られています。

保育業界から未経験でWebデザイナーに転身した経歴を持つshioさん。ブログのバナーは、さまざまな想いを込め、時間を掛けてデザインしているのだそうです。
例えば「初心者に向けたデザインのバナー」の場合、優しく柔らかい親しみやすいフォントを選び、文字は白一色にするなどさまざまな工夫やアイデアが施されています。
記事にはほかにも、これまでにデザインした多彩なバナーを紹介。特に注目したいのは「経験を活かし本気で作ったこども向けデザインのバナー」で、こども向けのサイトデザインを行った経験と保育業界での経験が随所に活かされたデザインになっています。

記事後半には、こちらの記事を作成する1年前にデザインしたバナーも紹介。「未経験感のあるデザインのバナー」と題して現在のデザインと比較しながら改善点と共に振り返られています。
記事には「勉強を続けていくとこうなっていくというのを見て、参考にしてほしい」と記載。Webデザイナーを目指す人を後押ししたいというshioさんの想いも垣間見える内容になっています。デザインのヒントを知りたい方はもちろん、これからWebデザイナーとして活躍したいという方にぜひ読んでいただきたい記事です。

■【1年前と比較】webデザイナーの想いを込めたブログバナー(アイキャッチ)作りのポイント　記事詳細
https://watashino-design.com/blog-banner-point/
トップページ
https://watashino-design.com/

写真素材レタッチでWebデザインの価値を高めよう！【人物編】（共働き夫婦のウェブログ）

見たままの情景がそのまま写真に収まってくれるのが理想的ですが、実際はカメラの性能や撮影技術が仕上がりに影響しますよね。そんなときに役立つのが写真の編集や修正を行うレタッチ。主に、画像編集ソフトを用いて色合いの調整や画像の修整など加工作業を行うものです。

今回注目したのは、人物の写真をレタッチすることで印象をグッと良くする方法を紹介している『共働き夫婦のウェブログ』というブログの記事。《写真素材レタッチでWebデザインの価値を高めよう！【人物編】》です。
こちらの記事は、夫婦でブログを発信しているご主人のとしさんが紹介しています。

記事内では、「そもそも写真素材のレタッチはなぜ必要なのか」といった基礎知識のほか、素材デザインの視点をもつ大切さと押さえておきたいポイントを解説。基本のポイントとして挙げているのは、「顔の明るさ」「肌の色身」「彩度」に関する3つのエフェクトです。実際に人物の写真を使ってPhotoshopでレタッチする方法が詳しく記載されています。
デザインの価値を高めるためには、「デザインに応じてバランスをみながら数値を調整すること」が大切とのことです。ブログ内ではほかにも、Photoshopでレタッチするときの調整レイヤーに関する便利な方法も発信されているので、ぜひ参考にしてみてはいかがでしょうか。

ブログの管理人であるご主人のとしさんは、現在Webディレクターとして活躍。妻のまきさんは、Webデザイナー＆ディレクターとしてデザイン会社に勤めているそうです。仕事に役立つWebデザインに関する情報のほか、家計管理や子育てなど夫婦の日常も書き綴られているので、役立つ暮らしの一コマも覗いてみてくださいね。

■写真素材レタッチでWebデザインの価値を高めよう！【人物編】　記事詳細
https://soranoco.design/5-retouch-tips-to-raise-designvalue/

デザインの写真配置の基本レイアウト。イメージを伝える配置のバリーション。（デザナル）

写真の配置はデザインに大きく影響を与えます。同じ写真であっても配置一つで印象がガラッと変わってしまうため、どの配置が一番効果的かと悩んでしまうWebデザイナーの方も多いようです。

今回ご紹介するブログ『デザナル』を運営しているclipさんも、写真を「どう入れたら効果的に伝えられるのか」と悩むことがあるのだそう。フリーのディレクター兼デザイナーとして幅広く活躍するclipさんの記事《デザインの写真配置の基本レイアウト。イメージを伝える配置のバリーション。》には、写真の基本的なレイアウトが画像付きでわかりやすく解説されています。

記事には、同じ写真を使ったざまざまなレイアウトが紹介されており、それぞれの違いがよくわかるようになっています。例えば、写真の周りに余白のある「四角版」と、紙面の上下左右の1辺～3辺に余白なく写真を入れる「立ち落とし」では、同じ写真を使ったデザインであっても全く違った印象を受けます。
さらに、紙面の全辺を立ち落としにした「全面写真」の場合、迫力のあるデザインにはなりますが、文字の入れ方に工夫が必要なのだそう。ブログには、余白のデザインや文字の効果的な入れ方などの記事も掲載されているので、併せて目を通しておくとよいでしょう。

その他にも、被写体の輪郭を切り抜いた「切り抜き」や複数の写真を用いた「タイリング」などのレイアウトも紹介。同じ写真でもレイアウトで全く違った印象になることがよくわかる記事になっています。
記事には「写真の入れ方で伝えたい意味合いも変わってくる」と書かれており、最後には「どのように伝えたいのかを意識してレイアウトをすることがとても大切です」と締め括られています。記事のレイアウトを参考に、どのように伝えたいのかを意識しながら効果的な写真の配置を目指してみてはいかがでしょうか？

■デザインの写真配置の基本レイアウト。イメージを伝える配置のバリーション。　記事詳細
https://clip-blog.com/photo-layout/