#Day77 進捗・これでOKだけどあとグループ分けだと思ってます💦

#Day77

先日のオリエンで、苦手意識があった画像編集が楽しい〜となった💫

でも一人でやると色んなことが起こる・・・笑

まずダウンロードした画像が背景なしで切り抜けないというところからスタート。

これは男の子ランキング・女の子ランキングで使う用の素材だった。

結論、原因は解明できなかったがおそらくダウンロードした形式がzipだったのが原因（予想）。

pingでダウンロードしたものは今まで同様背景なしで編集・切り抜きができた。

これで一旦そこは（無理矢理）解決。

その後おすすめ商品の部分の画像をフォトピーで編集。

マスクは使わなかったけどこの前の続きでイメージに近いものを作成。

全然進まなかった部分なのでイメージに近いのもができただけで嬉しかった。

フォトピーは中心にテキストが配置されてるよ〜みたいな目安が出てくれない？のでそこで詰まった・・。画像を別で編集となるとここの編集の段階で中心に合わせて配置する必要が多分あるのね？と学習。

これは最初PSDとして保存したらfigmaにアップできないという事態発生。

画像（jpeg)として保存し直してfigmaに取り込み成功。

口コミの詰まっていたところの余白を修正。

うーん！グループ分け次回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=1%3A2&mode=design&t=rn6WJ04lRxYNcTh8-1

#Day76 時間使って進んでないという進捗📝

#Day76

フォトピーにて画像を編集する動画を見ながら作業。

イメージはおすすめアイテムが散りばめられていて少し装飾が入っているような感じ。

背景はシンプルが良いのかなと今の所全体のバランスとしては予想している。

背景賑やかだけどこんな感じとか

だが一つの画像を切り取るのにとても時間がかかった😂

クイック選択・自動選択で試したが最初の何回かはそもそも切り取られている表示が出ていなくて何回もトライしているうちに、なんでか分かっていないができた。

選択箇所を反転させて新規ファイルとして一回開いてそれをコンテンツ幅に合わせた新規ファイルに合体させるというやり方をした。

でももう一つ作成した画像を貼り付けると一つ前に貼り付けた画像の位置を編集ができないという事態が発生。

そんなわけないのに。笑

そして貼り付けると画像が荒くなってる。

さらにクイック選択などで背景に色がついてる画像を編集しようとするとぐちゃぐちゃに切り取られる。

若干の編集とかいうレベルじゃなく、対象のオブジェの上にぐちゃぐちゃと線が表示される。

一旦背景が白い素材限定で編集。３個編集して貼り付けた。

背景白だと何となくは切り取ってくれる。

🤨

真ん中に文字が入るのでもう少し素材を散りばめる予定。

でもこの編集が使いこなせるようになったらめっちゃいい。

自分の考えてるコンテンツのイメージとか、クライアントさんが思うことを再現できるようになるんだなぁ・・・

背景白い素材限定にしたせいでまた素材探しで詰まったので、一回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=1%3A2&mode=design&t=sHudAIQ6oRyymlWw-1

#Day75 休憩中にちょい作業進捗😂

#Day75

インスタのアイコンを入れてそれっぽく色をグラデーションにしたかったけどなんか違う😂

これくらいなら仕事の合間にサクッとできちゃうかしらと思ったのに🤣

要色調整。本物見ながら。

一旦素材が出揃った😎

（おすすめ商品のところ以外）

これで調整と、揃えたりレイヤーの整理はまたやろう。

あとはフォトピーでおすすめ商品の画像編集だなぁ〜🤔

あとフッターの色変えよう。全体的にしっくりこないから。

ちょい進捗

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

#Day74 真似をする💫

#Day74

レビュー動画を見て口コミランキングの部分が可愛かったので、真似をしていく。

もう良いと思ったものをとりあえずすぐ真似することから😂！！

その段階まで行ってないので想像ができないけど、

これを実装していくときどうやるんだろうとよぎりながら作業・・

昔、学生時代に流行ったブログとかのイメージだとコードの中に入れたい画像のURL入力したりしたけど、こういう図形でデザインした場合どうやるんだろう〜😂

カピバラの本を漁ってみる🥹

フォトピアを使って素材を作成する動画もアップしてくれていたので今日はそれをやってみる・・！見た感じできるか不安だが笑

今はその動画を見る前に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=KvQLENq1I7yYfAnX-1

参考になりそうなサイトメモ

Photopeaで画像サイズを変更する方法 | あきみろのゲームブログ

#Day73 こんなに難しいのか🥹📝

#Day73

またその他の素材を探すところから💫

画像を当てはめると口コミNo1やラベルの画像が下に隠れるのでこれらの下に画像を配置していくってことだよな・・・とレイヤーのサイドバーをかなりいじる。

それでグループもバラバラになってしまった。

後々揃えなければ。

画像を配置したら口コミNo1の文字大きすぎかもと思った。

商品画像隠れるしちょっと邪魔になってしまう。

でも無いと何の１位か分からないし・・

そもそも商品ラインナップのコンテンツで順位いるかな。

確か男女別のランキングとは別に、口コミ重視しそうなペルソナだから入れたんだよな。

ここ変えるのは実際だったらクライアントの許可とか話し合いいる部分？😵‍💫💦

一旦このままで行くけど、はっきりいうとダサくてやだ😂文字は小さくする。

おすすめ商品の背景画像は良いのがなければ、やり方わからないが自分でちょっと素材を組み合わせてサイズに合わせて作りたいと思い始めている😂

なんかこんな感じで真ん中に文字入るようにして、横に丸く商品画像が散りばめられているのとか。

進捗

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

#Day72 決められたサイズに合う素材・・・

＃Day72

おすすめ商品一覧の画像なら探すのが簡単そうと思ったがそうでもなかった。

商品が散りばめられているような画像を想像して探した。

うーんなんかこんなのとか・・

でも配置しているサイズに合わせようとすると1000✖️160のサイズになるので

画像全体が見えなくて靴下のアップみたいな画像になる。

ので商品一覧の画像に見えない😂

無理やり全体が見えるよう伸ばしてサイズを合わせられないか試しにやってみたら伸びすぎて何の画像かわからなくなった笑

えーじゃあこのサイズに当てはめたときにちゃんとなる素材が必要かぁ😭とひたすら素材探し。

ファーストビューの画像で苦労していたが、決められたサイズに合う画像探しの方が圧倒的に難しいなと気づく😱

ファーストビューは大きさ広いから素材の使いたい部分ちゃんと使えたし・・

ラッピングの画像も同様のことが起こるがパッとみて何の画像かわからないレベルまではいかなかった。でも素材によっては文字を右か左に寄せないと見にくい。

現在３パターン試し。

前にFBで素材の背景を伸ばしたりもできるとコメントもらっていたがそれができれば文字中央のままでもいけそう。でもコンテンツ単品で見ると左右に文字を寄せるのはそんない悪くない気がする。全体に当てはめて揃ってない感が出たら考えるとする。

進捗

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

#Day71 進捗🌈頑張ろう🐣

#Day71

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

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

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

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

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

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

素材探しで思ったこと。

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

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

色とかの問題？

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

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

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

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

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

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

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