この記事ではデイトラWebデザインコースでの学習記録、感想やつまずいた点などをご紹介します。
参考になりましたら幸いです。
前回の「デザインの理論と実践」はこちら。
DAY15【あしらいの基本をマスターしよう！】
今日はあしらいについて。
あしらいの選び方が難しかった
前回の制作ですでに感じたのは、「どのあしらいを選んだら良いか」が難しかったこと。
見出し一つとっても、「ここはシンプルにした方が良い」「ここは強調させたい」などが完全には自分の中で定まっていなかったなと思います。
きっと場数が足りず引き出しが少ないからですね。
素材はどこから持ってくる？
Pinterestでいいなと思うあしらいを見つけても、どうやったら再現できるか？という壁に当たりました。
例えば、少し歪な丸・ウェーブデザインの線など。
素材サイトにもありますが、細かい調整ができなかったりイメージ通りのものがなかったりなど、「自分で作れたらいいのに」と何度も思いました。
DAY16【あしらい実践！①】
今日は実際にあしらいを作る練習でした。
今日はラインとフレームについて。
プラグインで制作の幅が広がりそう
Figmaにプラグインがあることはなんとなく知っていましたが、実際に使用してみるとかなり制作の幅が広がることがわかりました。
今回使用したプラグインはこちら。
| Zebra − Striped Backgrounds | ストライプの作成 |
| Wave & Curve | 波線の作成 |
| Arc | テキストを湾曲させる |
どれも簡単に複雑な形を作ることができました。
少し調べたところ本当にたくさんの種類のプラグインがあるようなので、都度調べてインストールしてみたら良いのかなと思いました。
ペンツールが便利だった
正直ペンツールの使い方がよくわかっていなかったので今まで使っていませんでしたが、リボンのようなカーブした図形が簡単に作成できて驚きました。
前回、一部を切り欠いたようなデザインを作成した際は「背景色を上から重ねる」という手法をとっていましたが、次に似たようなデザインを作る時はペンツールで作ってみようと思います。
DAY17【あしらい実践！②】
今日も昨日に引き続きあしらいを作る練習でした。
テキスト装飾と写真アレンジについて。
複雑なデザインもアイディア次第で実現可能？
テキスト装飾の例にこのようなデザインがありました。
こちらのデザインを再現する時、ラインを複製したものをマスクで切り抜くだけでできてとても簡単でした。
でもこのラインとグラデーションのデザインを思いつくかどうかが一番重要で、思い描いたデザインをFigmaなどのツールで形にできることがスキルなのかなと。
結局、デザインの引き出しを増やすことが最重要なのかなと感じました。
Web制作コースでも感じていましたが、デザインも情報収集能力が高ければスキルを伸ばせるのかも。
検索力には自信あるので伸ばしていきたいです。
DAY18【Figmaの機能を使いこなそう！｜画像編集編】
今日から3日間はFigmaの機能について。
様々な画像編集の技法を学びました。
Figmaでも画像編集できることに驚き
今まで画像編集といえばAdobeのPhotoshopというイメージがあり、実際にフォトショで加工してからFigmaに取り込んで使用していました。
それがFigma上のプラグインだけで完結できるということに驚きました。
例えば、「Remove BG」という画像を簡単に切り抜きできるプラグイン。
最初にAPIを設定する手間はありますが、一度設定するとFigma上で簡単に画像の切り抜きができました。
ただ、かなり画質が落ちる印象だったので積極的には使わないかも。
もしくはデザイン上だけに使用し、本番環境には高画質のものを別で用意する必要がありそうです。
DAY19【Figmaの機能を使いこなそう！｜ペンツール編】
今日はFigmaのペンツールの操作方法について学びました。
ペンツールをマスターしたい
ペンツールは直線・曲線共に自由自在にオブジェクトを作り出せるツール。
素材を自作することで、素材サイトから適切な素材を探す手間が省けます。
また、作成したオブジェクトの内側を塗りつぶすペイントバケツというツールがあるそうで、より様々な素材作りに役立ちそうです。
輪郭がわかりにくい画像の切り抜きに最適
前回学習したプラグイン「Remove BG」はプラグインが自動で境界線を検知し加工するため、輪郭がはっきりした画像に適しているよう。
はっきりしていないものはペンツールで地道に選択することで切り抜きが可能なようです。
DAY20【Figmaの機能を使いこなそう！｜パスファインダー編】
今日はFigmaのパスファインダーについて学びました。
複雑な素材の作成に
パスファインダーという名称はAdobe illustratorの機能で、Figmaではブーリアンという機能だそう。
少し調べたところ、イラレでもできることはほとんど同じようです。
Figmaでは結合・型抜き・交差・中マドの四つの機能があり、複数オブジェクトを組み合わせることで複雑な図形を作成することができます。
さらにペンツールと合わせることで、より複雑な図形を作成でき、素材作りに活かせそうです。
今回の課題は吹き出し。
このような形を簡単に作ることができ、さらに細かな微調整も可能です。
練習として、吹き出しを複数作ってみました。
今までならこのレベルの素材は素材サイトからダウンロードする選択肢しかなかったと思いますので、これらを自作できると制作の幅がかなり広がるなと感じました。
理想の素材を自作できたら探す手間や使用権を気にする必要もなくなるかな
まとめ
Web制作コース受講中、カンプを見て「この素材どうやって用意しているんだろう…？」と思っていたので、素材作りの方法やアイディアを学ぶことができ、疑問の解消もできてスッキリできた回でした。
もちろんまだまだ知らない機能や技法は引き続き勉強が必要ですが、今回の学習で少しデザイナーに近づけたかな？と思います。
ペンツールももっともっと使いこなしたい！！
次は「デザインを言語化しよう！｜Photoshopの基礎｜伝わるバナーを作ろう」をレポートします！
コメント