どうも皆さんこんばんは！買い物行こうとすると雨が降る、お風呂に入ろうとすると地震がくる、踏んだり蹴ったりな一日を過ごしてました。龍ちゃんです。
最近関東は地震が多いですね。防災グッズとしては、寝室に靴を一足置いておいた方がいいらしいですよ。防災意識のために靴を一足買いましょう。
本題に入りましょうか。今回はシリーズもの第三弾で、デザインから作成までやってきました。前回の記事はこちらです。まとめてみたい方は、GitHub Pagesのリンクを張っておきます。
今回の成果物はこちらです。今回のテーマは「日本」と「秋」ですね。「日本」ということで縦書きのデザインを活用する方法を模索していました。あとは「秋」のイメージの写真を写真フォルダから探しに探し回りましたね。今回もFigmaを使用して、デザインカンプを作成しました。気になる方は覗きに来てください。こちらです。
今回は、新しいこと2つに挑戦しました。まず1つ目はFigmaとTailwindで縦書きのデザインを実現したことですね。Figma上では、ボタンとしてそういったボタンがあるわけではなく、設定を三個ほど調整して実現しました。詳細なやり方はこちらのサイトを参考にしました。Tailwindでも縦書きの設定は存在しないので、新しく追加設定を行いましたね。これは若干、やり方が複雑なのでまとめておきます。参考にした記事というかGithubのissueはこちらです。やりたいことの解像度が高ければ、調べれば出てくるのでありがたいですね。
今回の一押しトップ画面がこちらです。紅葉の写真と白文字の愛称はいいのでは？という構想から構築しました。
2つ目としては、ロゴを作成したことですね。ロゴの作成といっても一からすべてを作ったわけでなく、フリーイラストを提供してくれているサイトを探して組み合わせて、Figmaの機能を活用して作成しました。フリーイラストを提供してくれるサイトは、神ですよね。最近は、そういったサイトを探しては、ブックマークするのが習慣になってます。7つストックすると願いが叶うとかないですかね？そのうち、そのブックマークを公開する記事を書きますので、お待ちください。
今回作成したロゴがこちらになります。こだわったポイントしては、龍之介の文字が重なっている部分は白色でマスクしている点ですね。あとは、人生のキャッチコピーを入れておきました。あっ！本名は龍之介といいます( *´艸｀)
今回は新しいことを学べて、ブログのコンテンツも見つかったので良い回でしたね。最近、UXデザインについて学んでいこうと思いまして、いい教材になるサイトを教えていただいたので勉強してきますね。その勉強内容を血肉として、輸入できたらうれしいので奮起して勉強してきます。
リンク集
- Figmaでテキストを縦書きに対応する方法 | wentz-design.com
- 東洋の龍シルエット
- Add CSS writing-mode classes to Tailwind · Discussion #2494 · tailwindlabs/tailwindcss
挨拶
本格的にプロジェクトに入る予定なので、若干更新頻度は下がってしまいますけどシリーズは継続していきますので覗いてみてください。
ではでは、よいコーディングライフを！！また作成を頑張っていきます！！
