初心者🔰のWebデザイン独学記録🐣✏️

その日の気づき・疑問点・進捗📝

#Day71 進捗🌈頑張ろう🐣

#Day71

 

フォトピアで素材を編集することから開始。

 

前回の日報であげたお手本サイトのような、探すボタンの横に画像を入れたいので、そこの素材を探すことから。

これならできそうと思ったところから始めたつもりだが、まさかのダウンロードしたものをフォトピアに入れるととても画像が荒くなるという自体発生。

どの画像で試してもすごく荒くなってしまい・・・調べると入れる画像よりも小さいピクセル数を設定して新規ファイルを作成すると荒くなるとのこと。

なるほど、という感じで大きめの台紙で新規作成して画像を取り込むと何とか解消。

 

その後編集して、次は保存ボタンが押せないというトラブルが発生したが、調べても事例がなかったのでもしかしたら一時的なバグかな。エンターキーで保存成功。😂

 

素材探しで思ったこと。

素材単品でいい!と思っても、デザインに当てはめてみると全体とテイストが合わないとかなる。それの繰り返し。これは逆に楽しい。例えばランキングの王冠マークひとつとっても素材によってページ全体のイメージが変わったりする。

 

今回はこれ可愛いなと思った手書き系の素材を探すボタンに入れてみたけど、入れてみると可愛いけどファーストビューの感じと若干チグハグかなぁ。

色とかの問題?

一回全体的なイメージを定めたくて他の素材も進めたいので一旦これで入れて進めている。他の素材で絶対これ使いたいみたいなものが出てきたらそれに合わせて修正必要。

 

ランキングの部分はそれぞれの商品に王冠マークつける予定でなかったが入れてみる。

1位がどれかわかりやすいから入れた方がいいかも。

他のサイトは入れていないのもあったけど。

でも少なくともここに王冠入れるなら見出しの【男の子ランキング】の部分の横には王冠ではなくて男の子ってわかるような画像(マーク)の方がいい。

 

口コミにも1位とか2位ってわかるようにラベルを入れたが、上のランキングはモノクロ王冠なのに対してここは色がついてると統一性がなくなるかなと思ったがここはおすすめ商品のカテゴリを挟んでいるからそんなに気にならないかな・・・🤔

andmoreItemのボタンを白くした。

 

探すボタンに画像を入れたことによって四角のサイズを大きくする必要があった。

高さはそのままで幅を200に設定。また揃える作業!揃えた!

でも画像の大きさも揃えると見た目の大きさが揃ってないように見える現象発生。

例えばガラガラとひよこを同じ45✖️45にするとガラガラの方が大きく見えるのと、そもそもガラガラが収まらない。

合わない。収まらない。

ので、画像によって幅や高さを変えた。そうなると次は全体を揃えるのに苦戦。

今これを書いてて、あ収まらない問題は縦横比を揃えるにチェックして大きさ変えればいいのかと思ったので今チェックして編集した。

ボタン(四角)自体は揃えたが、中の画像とテキストが厳密に揃ってないよなぁ🥲

 

おすすめ商品・ギフトラッピング・名入れ

についての画像は、商品画像がページ全体に並ぶことを想定すると、なるべくシンプル・余白が多いものを使いたいと考えながら探しているがまだ決まらず・・・

ラッピングのコンテンツの部分の画像が一番見つけやすいかなと思っている。

横もしくは上下どちらかに余白が多いものを探している。

上に余白、でももう少しナチュラル色がいい。

 

横に余白。こんな感じのを伸ばして使えたらいい。

横に余白。うーーん。クリスマスっぽい!

そういえばグラデの練習で横に複製していて良かった。

作業しているとそもそものフレームとか考えていた全体の配置を見失うから、、

慣れないうちはこうやってそもそものフレームを横に置いて確認できた方がいいかも😂

どこを変えたとか分かるのと、よくなったかも!悪くなったかも!も気づけそう。

 

進捗

次回

ラッピング画像探し

グループ解除したりいじった部分の整理

 

https://www.figma.com/file/gfoImPAq636rIrkYg8v6EU/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB?type=design&node-id=1%3A2&mode=design&t=ToPC345PDNXYjVfD-1