こんにちは。はこだてたろうです。
DailyUIチャレンジ３日目にして、早速１日空けてしまいました。
１日２時間弱をコンスタントに確保するのにはやはり無理がありました(^_^;
最近のブームというと少し軽く聞こえてしまうかもしれませんが、最近は書籍「世界一やさしい『やりたいこと』の見つけ方」の著者八木仁平さんの考えに触れ、日々自己理解に勤しんでいます。
その中で「挑戦なんかするな」という動画がありました。
背伸びをして大きなことをやろうとするから怖くなって続かない。実力が伴っていないからやり遂げられなくなって自己嫌悪してしまう。
なんかまさに今の自分では？と思ってしまいました(^_^;
仕事始めたての新米でもないんだしDailyUIくらいこなしてみせろよ、と思ってしまう自分もいるのですが、すこし背伸びをしてしまっていたのかもしれませんね。
このブログは私の仕事ではないので、肩ひじ張らずに気楽に楽しく好きなことを書いていけばいいのだと考えを改める機会となりました。
#003 Landing Page
今回はランディングページです。
広告を踏んだときとかに最初に表示される、商品やサービスの魅力がいっぱいつまったあのページです。
今回トリビュートする作品はこちら。
Hmmmm, Dispensing energy on many things. Hustle in the day, design at night. #dailyui #003 completed. pic.twitter.com/wbemaBijZD
— Malik Mustapha (@malik_adedayo) April 19, 2023
0:09〜0:10 あたりのタイル状？に写真とテキストを配置したデザインがいいな〜と思い、こちらの作品をチョイスさせていただきました。
作成した画面
作成したと言いつつ、このタイル上の部分のみとなっています。
作者さん、ごめんなさい。。。
こう見てみると、ブロックの配置だけ真似しても全然さまになりません。
フォントの大きさや行間、余白、文字数など、バランスを追求していかないとやっぱり作者さんの作品のようにはなりませんね。
もっと作り込んでいくことを考えたとき、レスポンシブ対応も忘れてはいけませんね。
画面が小さくなったとき、PC画面のように２段表示はできないので１段表示にしないといけないですが、何も考えずにやると「テキスト -> 画像 –> 画像 -> テキスト」という順で並んでしまいます。
実現手段はいくつかあるとは思いますが、ブレークポイントの切り替わりにちょっとした小細工を入れてあげないといけなさそうです。
おわりに
今回実装したコードは以下のレポジトリで公開しています。
余白や行間ひとつとってもこだわり抜かれているんだなぁと頭が上がらない思いです。
見習わなければいけませんね。
ご覧いただき、ありがとうございました。
コメント