DAY07/45 Figmaで土台作りを始めた[制作過程画像付き］

2025年1月6日 23:12

おはこんばんにちは、iaです。
今日は午前中がお休みで、３時間くらいは学習時間に充てられました！

だけど絶賛喉風邪中で、一秒でも早く寝て明日に備えたいので…
30分で書き上げるのが目標！やったるで〜！

◆今日やったこと

ざっと今日やったことを書き出していきます。

参考書のおすすめに書いてあった以下３サイトを見てみた。

お名前.comは一見安いように感じるけど、使いたい文字を打ち込んでドメイン検索すると、大概オーソドックスな「.com」や「.jp」は❌（バッテン）がついていて使えないし、使えると思ってもそこそこの金額設定がされてたり、なんかビミョかった笑

ムームードメインは使いたいドメインが通りやすい。「ia_diarty.com」で、799円だったかな？提携のサーバーがあるみたいで、そのサーバー使えばたぶん無料。良さげかも？その流れで見た提携サーバーのサービス名は忘れちゃったけど、あんまり安くない印象だった。

そして最後にロリポップ！レンタルサーバーを見た。これはムームードメインとセットで使えるっぽいし、必要に応じてプランを変えることができる。（その場合ムームードメインの金額も発生するかもだけど）

たぶん、ロリポップのサーバーでムームードメインを使うことになるかな〜

タイトルにもある「Figma」、ご存知ですか？
ワイヤーフレーム作成ツールとして、参考書のトップに書いてあったやつです。ブラウザー上での利用でも、アプリをインストールしての利用でもいける。とりあえずのお試しとして、ブラウザー作業中。ただし無料は３ファイルまでなんだってよ。

最終的には、Adobe illustratorを使っていきたいとは思っています。
実は前職でちょこっといじってたから、なんとなくは使えるんだ〜笑

ってなわけで、昨日載せた手書きのワイヤーフレームをこんな感じに書き起こしました！

わかりづらいけど、２本横に伸びるうっすいグレー帯は空白部分。デスクトップサイズを３枚縦に並べて作ってる。（たぶん続けて長方形でもよかった）

まだトップを飾るメッセージの下に配置する画像は考え中。
その後のaboutにあたる文章はまだnoteの自己紹介コピペ。プロフィールも草案なので、変更の可能性大いにあり。

けどま、大枠はこんな感じかな〜〜〜
なんかこれだけで様になってきた！

これでデザインカンプを作りやすくなったね！明日は使用する画像とか文字のフォントやサイズ感、色なんかも詰めていきたいところ！

いよいよ骨組みとなる、HTML！頭の部分は他のファイルからコピペして、書けそうなとこだけ書いていく！

で、書き上げたのがこちら笑

どうしても追加したくて、相棒のChatGPTさんに聞いて取り込んだのが
「今日の日付自動更新機能」と「カウントアップ機能」

どっちもわかりやすく教えてくれたし、サンプルコードあるからそれを改良すればそのまま使えちゃった(*´-`)

そこらへんの技術は、やっぱ「Java Script」っぽいっすね。
100％の理解はできてないけど、なんとなくわかる。ちなみにスクショのコードにはChatGPTさんが書き込んでくれたメモ書きもあるから、どの部分が該当箇所かは探せばわかるよ〜

ただここで、一つミスを誘う落とし穴があった！それが、同じ名前が2箇所で定義されたことで反映されないというミス。

カウントアップが全然反映されなくて、困ったから全文コピペでチェックしてもらったら、発覚！そこで片方は書き換えることで解決しまして、結果こんな感じで問題なく表示されました〜👏

今はまだCSSを反映してないからただの羅列だけど、「2025年1月6日」とDAYの後にある「７」は日付が変われば変わってくれちゃう！はず！

わーい楽しみ〜

ってな訳で、ドメインとかサーバーを具体的にイメージしたり、デザインカンプに向けてワイヤーフレームをFigma で作ったり、htmlファイルの作成に入ったりと、今日はかなり進めることができたのでは？

正直最後に紹介した機能の反映は、ChatGPT様々すぎて!!!
なんかChatGPTって書くの味気ないし、AIだと幅が広すぎて相棒というには違う気がする。なんで、これからはChatGPTに親しみを込めて、AI子さんって呼ぼうかな笑

たまたまだけど、私のペンネームに似てるよね。ある意味AI子さんあってのこの45日間チャレンジは成り立っていると言えるかもしれん。

さ！今日はここまで。
あ〜１時間経ったわ。ほんとはシャワー浴びたいけどさっきからおっさんみたいな咳してるし、身体もだるいんでさっさとベットに入ります。

明日は元気に学習できればいいな〜
（これ以上ツケを回したくない笑）

ここまで読んでくれて、ありがとうございました！
スキやコメント、待ってます！お休み！