時々唸るファンの音

色々と勉強してみたいと思ってる人の備忘録。

2019-12-25:神経衰弱を作ってみる その2

みなさーん!クリスマスですね!

今日も更新できそうなので、更新したいと思います!よろしくおねがいしまーす!

※今回の記事は画像が多いので、ご注意くださいませ……!

 

UIを実際に作ってみる

まずはイメージ画像!

実際にUIを作ってみることにしました◎

今回このアプリを作るのに向いてそうなソフトがあるので、そちらを利用することにしました。ずばり、Abobe XD!使ったことないから、上手にできるかわからないけど、とりあえず調べながらでもやってみよう~ということで、チャレンジしてみることにしました。

 

前回の日記(2019-12-24:神経衰弱を作ってみる その1)のラフな絵から画面に起こしていきます…

 

(色は相変わらずアレでソレ)

 

調べながら悪戦苦闘すること何時間か……

 

「こんなイメージになったらいいな!!!!」という私の願いが詰まったXDで作った画面が以下のものです。

 

f:id:noisy_f:20191225052425p:plain

f:id:noisy_f:20191225052443p:plain

f:id:noisy_f:20191225052454p:plain

f:id:noisy_f:20191225052504p:plain

f:id:noisy_f:20191225052512p:plain

こんな感じになったらきっといい感じな気がする…

あげてから気付いたけど、ズレてるやつあるじゃん!!!!!

むずかしいね…気持ちはそろってます、気持ちはそろってます……そろってます……。

 

HTMLとCSSで一生懸命作る

この画面みたいなヤツつくれたらいーなーと思って、一生懸命作りました。

HTMLとCSSでこれくらいシンプルな画面だったらたぶん私にも作れるぞ…たぶん…

と悪戦苦闘することまた数時間…出来上がった画面が以下のものとなります。

 

f:id:noisy_f:20191225053940p:plain

f:id:noisy_f:20191225053944p:plain

f:id:noisy_f:20191225053950p:plain

f:id:noisy_f:20191225053954p:plain

f:id:noisy_f:20191225054000p:plain

こんな感じの画面になりました……

思ったよりそれっぽい感じかな………

けっこう頑張れた気がします!

2週間を振り返って

ブログ公開して、2週間……まさか私が2週間連続で更新すると思わなかったです。

(書く内容と時間があったからですね)

 

おそらく年末年始は忙しいのでどこかで更新が止まるかもしれません…!

来年は少しのんびりペースで更新出来たらいいな。

(書く内容があれば更新するだろうけど…!)

 

明日更新できそうだったら、中身を悪戦苦闘している様子でも書こうと思います!

 

それではまた◎