2023-12-06

#Day84　番外編”オートレイアウトを真似してみる”🥸

#Day84

オートレイアウト機能についてフィードバックをもらってからこれは覚えたほうが良さそう🥺と思い、色んなユーチューブを見て本当に作れるか試してみた。

今回はこれを真似してみた。

www.youtube.com

結果

見た目なんとなく同じになっているようで・・・

わからない・できなかったこと

・一番下のコンテンツの顔写真３つの大きさ

→小さくしたい。簡単そうなのに。。。

これは適当な画像で取り組んだのが原因か。動画内ではちゃんと丸い形の画像を使っている。これは自分で丸く切り取った（背景は見えなくなっている）pngの四角画像😣

何回も試したがなんでか位置がズレるだけで大きさが縮小できず。

これオートレイアウトとしてまとまってないのかな。オートレイアウトとして囲った部分選択しても２つだけしか選択されてない？でもレイヤー上では３つあるんだけど・・・。

・間隔設定モード

→動画内で出てきた間隔設定モードボタンが見当たらず調べたところ現在廃止。今年6月から揃え位置のバー？みたいなところで調整。。。

ここがよく分からずコメント数を右端にしたかったのにうまくいかなかった。

オートレイアウトにする前に右揃えにするとか・・・？要研究😕

全体のコンテナの中の下の余白も0にしているはずなのに、

この顔写真とコメント数のコンテンツと間空いてるじゃん・・・・

なんでだろう😱

（なんとなく）できたこと・分かったこと

・左右上下の余白をコンテンツごとに管理できる

→余白を決めたコンテンツをまた大きいオートレイアウトのまとまりとすると、次はその大枠の中でコンテンツごと余白を設定できたりする

・コンテナに合わせて拡大縮小

→画像の幅を固定にしているとできないが”コンテナに合わせて拡大縮小という選択にすると大枠をいじった時に合わせてコンテンツが合わせて拡大縮小してくれる（これすごーい🥳）

・多分オートレイアウトに一回すると間隔とか決めちゃてるからいじろうとしても位置ずらせない？一回解除かなんかしないとなのかな。

とにかく動画が早い。

5秒ごとに止めるくらいのスピードで見た🐢

でもちょっとだけ、どんな機能かくらいは理解したと思う🤔

2023-12-05

#Day83　少し間が空いてしまった！💦

#Day83

・フィードバックでもらった探すボタンの部分を修正。

・shoppingの見出しとline upの見出しの上の余白が1ピクセルずれていたので修正

・オートレイアウトについてのフィードバック動画とユーチューブを見る

オートレイアウトは使えないとダメそう。

実際の場合絶対使う機能ぽい。。。🌈

ファイルを複製したのでそっちでヘッダーあたりを練習でオートレイアウトで編集してみている。余白の管理やアイテムの間隔を管理できることは理解。

検索ボタンとか多分これで編集したほうが綺麗にできそう。

検索ボタン、これだと左の余白が少なく見える。でも左右個別で余白の設定もできるらしい。

できた！へ〜！！🥹
これで複製とかすれば簡単？に揃う便利機能？？📝

https://www.figma.com/file/TmoOeLcbi4YTgZV2pzgCMm/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB-(%E5%BE%A9%E5%85%83)?type=design&node-id=1%3A2&mode=design&t=cNOJqU0qKWM4aBYQ-1

2023-11-30

#Day82 過去のバージョン複製🙌

#Day82

朝焦った口コミの部分は過去のものをバージョン履歴から復元でなんとかなった・・・

もう一生Figmaの統合と結合だけは間違えないと思う。

口コミの色と形などをフィードバックの過去の動画を見ながら再度調整。

復元したおかげでヘッダーの部分は元の位置に戻っていた。

全然勉強と関係なくジルスチュアートのクリスマスコフレの色味が可愛くてフォトピアで画像のグラデーションで同じ感じの作れるのかな？！とい遊んでいたら時間が過ぎてしまった・・・

以前のフィードバックでショッピングボタンに変なところが出てきていますのクイズ、なんだろう。やり直した時全部おかしかったからな。😵‍💫

テキストの四角の大きさが揃ってなくて余白を揃えようとしてたこと。かなと思っている😱！！

なんだか昼休みもいじった割にあんまり進まなかったけど・・口コミの部分色調整完了。

2023-11-30

#Day81完全に詰みました。早くどうにかしないと。

#Day81

口コミの部分の色を変更。

カラーパレットでこれくらいの色がいいかな〜と丸ぽちを合わせて、色味だけ下のバーで変更すると、明度と彩度の丸ぽちの位置はそのままで色味だけ変えれるのか。多分。

じゃあno1も2も3もぽちの位置合わせて色味だけ変えてみれば統一感出たりするのかなと試したら、確かにそんなに大きく雰囲気ズレたり変な組み合わせみたいにはならなかった。

でも色によるか・・・。

グレーっぽいのにしたい場合はぽちズレるもんなぁ。

白い文字の読みやすさの度合いが同じくらいになるとかなのかな・・🧐

今回はグレー２位にしたいのでポチは移動。

前のフィードバック動画で結合して色を変えていたので、選択して”統合”というのがあったのでそれで統合して色を変えていった。

角を丸くしようとなった時に統合しているので全部の角が変わる。

統合解除。解除ボタン見つからなかったけどコマンド・Shift・Gを押す。

→解除じゃなくてグループ化見たくなる

ここで調べると

グループ化・結合・統合があって

結合はまとめて一つのオブジェクトとして編集できる。

統合はもうそれ以上編集しませんよの時に使う。解除不可とあった。詰んだ。

解除できないとかある？！😱

Figmaのグループ化、結合・統合とコンポーネントの違いを知ろう | ともすた

終わった😵‍💫

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=0%3A1&mode=design&t=SHbaPU8HX7lP1wOK-1

2023-11-28

#Day80 モヤモヤするから朝と仕事の合間に😭

#Day80

昨日最後ランキングが揃わず終了したが朝起きて気持ちを新たに作業したら10分くらいで揃った。

小数点も直した。

昨日のフィードバックで、揃えたところは全体を選択して移動してたので

そこはズレないのかと（今更）気づいてそのように作業する。🥹

ショッピングのボタンを見る。

ボタンの四角の高さが年齢とおすすめだけ79.07になっていたので直す。

ボタンの四角は高さ80に合わせた。ボタン全体グループの四角を見ると80.93・・・

ここも80にしておく。

幅986もおかしいよね？だから横に微妙な隙間あったのかな。

1000に合わせる。

横の隙間がなくなってピッタリ！

と思ったらさっき合わせたボタンのそれぞれの四角がまたズレた。

ボタン全体を囲ってる四角を変更するとそれに合わせてボタンのサイズが変わる。

で、ここも高さずれてた！

揃ってないままでグループにしていたのかも。

だからずっと揃わない？

グループ解除して間隔など合わせて再度グループ化するとちゃんと幅が1000高さ78のグループになった！

次はボタンの中。

ガラガラが若干上が切れていたので高さを調整。

カテゴリから探すの文字も調整して左右の間隔を16にする。

上下の幅は均等OK。

ひよこをガラガラと同じくらいに目視できるような大きさに変更。

予算から探すの文字とひよこの左右の余白は31に設定。

年齢から探すも同じ。

おすすめから探すは左右17の余白。

文字の四角の幅が大きい場合、外の余白を合わせても四角の中に余白があるからそれで広く見えたりするよね・・・？😓なるべく文字ギリギリの四角サイズにして調整した。

引きで見て変じゃないか確認・・・🧐

🌈進捗🌈

・コンテンツ幅それぞれ68

※おすすめ商品とアイテムラインナップはフィードバックを参考に目視で見やすい距離(

85目視設定）

・男の子ランキング女の子ランキング余白48に対し、アイテムラインナップは20

・見出しからボタンや画像までの距離45

・王冠と鳥OK

📌手付かずと気になるところ📌

・口コミ

・ボタンの下の余白とandmoreの下の余白が合っていない（でも見た感じそんなに違和感なし。74と53。むしろandmoreを上にこれ以上くっつけると変だと思ってる）

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=K8toaUnPj5J9itDI-1

2023-11-28

#Day79　どこかを揃えるとどこかがズレる。🫡

#Day79

作業しながらブログも同時進行でメモります✍️

ショッピングとランキングコンテンツとラインナップコンテンツの中を揃えたい。

まず見出しの位置を揃えたい。

ショピングとラインナップは背景色があるので上からの数値を揃えやすい。

上から26ピクセルに配置。

検索ボタンは４つでグループなので、ショッピングの見出しは単体と考え、ここはくっつきすぎないよう目視で調整。

ラインナップも同様、フィードバックにもあったように６つの商品がグループなので見出しはくっつきすぎないように目視で調整。でもショッピングのコンテンツ内のピクセルとは繰り返しの法則で同じ間隔の方がいいので・・・ここも26ピクセルに配置。

shoppingとボタンの間は45。

lineupと口コミNo1までも45。

ランキングは背景色がなくてどこに合わせればいいかわかりづらかったのでラインナップと同じ高さ700の四角を背景に設置してみる。（もっとやりやすいやり方ありそうだけどこれしか思いつかなかった）

この見えない四角の上でランキングの見出しも上から26ピクセルに配置。

これで上は揃った！として、鳥の大きさを指摘してもらったことを思い出し一旦鳥を揃える。”男の子ランキング””女の子ランキング”の文字の間隔もOK、画像までの間隔も11で良し😵‍💫💪

男の子ランキングと女の子ランキングの間隔は48ピクセル。

アイテムラインナップの二倍以上間隔をとっているので、ここはグループ分けとしてOKだよね🧐ちょっと離しすぎかな、一旦これで行こう。

商品名と画像の間隔。ランキングの方は画像と商品名を6ピクセルにした。（目視でこれくらいかなとした）

全画像6に合わせる。商品名の四角が半端な数字だったから画像の中央から小数点単位でずれるので商品名の四角を整数にする。

全ての商品名が画像の中心、尚且つ画像との間隔6ピクセル感覚、よし😵‍💫💪

ここの6ピクセルに対して、アイテムラインナップは商品名と画像の間を9ピクセル間隔にした。

商品名（定番セット）と値段（¥3,000)をグループにして移動する。

キリよく10ピクセル開けてみたら何となく遠すぎな感じもあったので9にした・・
ここもテキストが画像の中央ではなかったので調整。

→ここでフィードバックの動画見直してそういう意味じゃなさそうと思った。

商品名と値段は近くあるべきだけど繰り返しの法則として画像からの距離はランキングと同じであるべきなのか。同じ6ピクセルに直す。

andmoreボタンはアイテムラインナップの見出しと画像までの間隔（45ピクセル）に揃えるべきと配置。これも中央になっていなかった😩ので中央に直す。

あとは・・・ランキング揃えよう。

まずさっき作った見えない背景の上から他と同じ26ピクセルのところにランキングの文字配置はされている。

上はok。として、男の子ランキンググループと40しか離れていなかったのでここを45に合わせる。

見えない四角のトップから見出しまでは先ほど26に合わせているので男の子ランキングコンテンツ自体を下に下げていって45の間隔をとる。

そうすると女の子ランキングのまとまりと男の子ランキングが近くなってしまうので女の子ランキングを更に下にずらして先ほどの48ピクセルに合わせ直す。

念の為鳥がずれてないか確認。グループにしているから大丈夫そう。

以前グループ分けちょっとよく分からんって思っていたけど、ここへきてレイヤー分けでグループにしておく便利さに気づく笑😇

ここで一旦全体を見る。

うーんやっぱりランキングの見出しと男の子ランキングまでの距離が、他と同じにしているのに若干長く見える・・・これはフィードバックでも貼ってもらったリンクにあった視覚のズレっぽい・・・ので全体を揃えてから考えるとする。一旦このまま他を揃える。

大枠のコンテンツ幅。目視で68ピクセルくらい開けていたのでそれぞれここで68の幅にする。

ファーストビュー画像からショッピングコンテンツ　68

ショッピングコンテンツからランキングコンテンツ（配置した見えない四角）まで68

ランキングコンテンツからおすすめ商品コンテンツまで68

全体的にせま・・・🥲となりMacBookpro14自体を伸ばす・・・。

え・・・同じコンテンツ幅なのに流石にランキングとおすすめ商品離れすぎてる🥹

ランキングの見えない四角の高さが原因か。andmoreボタンありきのラインナップコンテンツと同じ高さので考えてるのが違うのかな。

andmoreボタンとコンテンツ背景色の下までは43になっているので、一旦ランキングの中の女の子ランキングと見えない四角の下までを43に揃えてみる。

・・・と思っていじったらランキング見出しを上から26に揃えたのがズレる。

しかも小数点単位。

えええ🥹確認するとランキングの画像みんな小数点単位の大きさだった・・？

画像の大きさから修正。高さが140.22になってる。全部140にする。

予想通りこれで王冠マークもずれた。修正。王冠マークも小数点単位の高さだった。

王冠マーク高さ43.01から43ジャストに変更。

そしたら揃わない笑

高さ140の画像の上で43の画像を配置しようとしても割り切れないとしても間隔は整数になるはずなのに何故かここも小数点単位になる。。。

なんでだ・・・さっきランキングの背景見えない四角移動したの関係アルカナ・・

→関係あるっぽい😇さっき見えない四角のトップから見出し26ピクセルにしたのに26.04になってる。

なんでかわからなかった🧐取り合えず男の子ランキング・女の子ランキングそれぞれ高さもまたずれたので揃える。高さ218に統一。

このままさっきやろうとしてた女の子ランキングと下（見えない四角の）をandmoreと下の間隔と同じ43に合わせる。

で、男の子ランキングを女の子ランキングと幅48まで揃え直す・・。

ランキングの見出しを同じく揃えようとするとやはり小数点出現。

わかった、多分”男の子ランキング”の文字の四角の高さが小数点でそこに合わせようとしてるからかも。と思い、

とりあえず文字の四角も整数にしてRankingの文字を手動で揃える。45にできた。

これで・・背景の上との26ピクセルだけズレてるので、背景の四角を合わせよう・・

できた。というか・・・・多分さっきランキングのグループレイヤー全部選択していじってたのかも。

背景の四角だけレイヤーの欄から選択してサイズ変更したらできた🤣

こういうことの繰り返しすぎる😄😅

今度はちゃんとランキングの全体を選択してショッピングコンテンツとの間隔を68とる。よし😵‍💫💪

これで一旦コンテンツ幅は68で揃ってるはず。

おすすめ商品とラインナップが詰まって見えるけど！！！

一回揃えて全体見てから錯覚系は手をつけたいので進む。

ここで検索ボタンのしたの余白が73で、どことも揃っていないのが気になる。

下のラッピングと名入れコンテンツも68ピクセルに合わせて配置し直し。

羊🐏は単純に高さが足りなくて切れていると思って36の高さにしたら何故か途中の🐏が切れる自体発生。なんで？！35にしたら収まった。

全体を揃えたかったところまではやった。😵‍💫シャドウもとった。

あとはショッピングの中のフィードバックであった宿題（クイズ）と、口コミの色とかだ。

と思って見直したらandmoreの下の余白53になってる。あれ。これだとランキングの見えない四角としたの余白と合わない💦

ランキングの画像の大きさもまた小数点になってる。王冠もだ。

もう一度やる・・・・。😵‍💫😵‍💫😵‍💫どこで変わっちゃてるのか気づきたい・・・😓

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=EnZXPbILQYwdDYD8-1

2023-11-24

＃Day78　揃える（これ多分定期的に見直すとかじゃなくて常になんだ笑）

#Day78

フィードバックを見ながら合わせていく。

定期的に揃えるのではなく一つ編集や追加をしたらまず揃えるのか。

まずショッピング（検索ボタンコンテンツ）の上の余白。

最初感覚で60くらいの余白を開けたが何となくまだ詰まってるように見えて、下のコンテンツ同士の余白78に合わせる。

shoppinngというテキストと検索ボタンの間を56にしたいが56.73になる・・

全て整数の四角で作っているのに。🧐

→これは時間置いてもう一回やったらボタンの四角の高さが小数点で配置されてたからだと発覚

検索ボタンの中はそれぞれまた整数にし直して余白を割り切れるように左右対称の数値で配置できるようにやり直した。

余白を合わせたが何となくヒヨコと予算から探すのテキストが中央に見えないのは錯覚・・？

でも個別のボタン単体で見ると揃ってる。

Rankingのテキストは画像と合わせるのか・・・！

ここに関しては【男の子ランキング➕鳥マーク】があるので広く見えて、下のLineupの上の段の値段の部分から下の画像までも同じ余白にしたけど、どうしてもランキングの余白が多く見える。

それ以外の部分は揃え直した。

それぞれ四角が半端な数字になっているものもあって揃わなかったのもあり、四角の大きさから見直した。

揃える時にコンテンツごと動かしたい場面も多かったので自然にレイヤー整理も同時進行。

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=0%3A1&mode=design&t=yNWgM10X4PXqIuxd-

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

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