#Day84 オートレイアウト機能についてフィードバックをもらってからこれは覚えたほうが良さそうと思い、色んなユーチューブを見て本当に作れるか試してみた。 今回はこれを真似してみた。 www.youtube.com 結果 結果 見た目なんとなく同じになっているようで…

#Day83 ・フィードバックでもらった探すボタンの部分を修正。 ・shoppingの見出しとline upの見出しの上の余白が1ピクセルずれていたので修正 ・オートレイアウトについてのフィードバック動画とユーチューブを見る オートレイアウトは使えないとダメそう。 …

#Day82 朝焦った口コミの部分は過去のものをバージョン履歴から復元でなんとかなった・・・ もう一生Figmaの統合と結合だけは間違えないと思う。 口コミの色と形などをフィードバックの過去の動画を見ながら再度調整。 復元したおかげでヘッダーの部分は元の…

#Day81 口コミの部分の色を変更。 カラーパレットでこれくらいの色がいいかな〜と丸ぽちを合わせて、色味だけ下のバーで変更すると、明度と彩度の丸ぽちの位置はそのままで色味だけ変えれるのか。多分。 じゃあno1も2も3もぽちの位置合わせて色味だけ変えて…

#Day80 昨日最後ランキングが揃わず終了したが朝起きて気持ちを新たに作業したら10分くらいで揃った。 小数点も直した。 ここが合ってなかったのかな・・ 昨日のフィードバックで、揃えたところは全体を選択して移動してたので そこはズレないのかと（今更）…

#Day79 作業しながらブログも同時進行でメモります✍️ ショッピングとランキングコンテンツとラインナップコンテンツの中を揃えたい。 まず見出しの位置を揃えたい。 ショピングとラインナップは背景色があるので上からの数値を揃えやすい。 上から26ピクセル…

#Day78 フィードバックを見ながら合わせていく。 定期的に揃えるのではなく一つ編集や追加をしたらまず揃えるのか。 まずショッピング（検索ボタンコンテンツ）の上の余白。 最初感覚で60くらいの余白を開けたが何となくまだ詰まってるように見えて、下のコ…

#Day77 先日のオリエンで、苦手意識があった画像編集が楽しい〜となった でも一人でやると色んなことが起こる・・・笑 まずダウンロードした画像が背景なしで切り抜けないというところからスタート。 これは男の子ランキング・女の子ランキングで使う用の素…

#Day76 フォトピーにて画像を編集する動画を見ながら作業。 イメージはおすすめアイテムが散りばめられていて少し装飾が入っているような感じ。 背景はシンプルが良いのかなと今の所全体のバランスとしては予想している。 背景賑やかだけどこんな感じとか だ…

#Day75 インスタのアイコンを入れてそれっぽく色をグラデーションにしたかったけどなんか違う これくらいなら仕事の合間にサクッとできちゃうかしらと思ったのに 要色調整。本物見ながら。 一旦素材が出揃った （おすすめ商品のところ以外） これで調整と、…

#Day74 レビュー動画を見て口コミランキングの部分が可愛かったので、真似をしていく。 もう良いと思ったものをとりあえずすぐ真似することから！！ その段階まで行ってないので想像ができないけど、 これを実装していくときどうやるんだろうとよぎりながら…

#Day73 またその他の素材を探すところから 画像を当てはめると口コミNo1やラベルの画像が下に隠れるのでこれらの下に画像を配置していくってことだよな・・・とレイヤーのサイドバーをかなりいじる。 それでグループもバラバラになってしまった。 後々揃えな…

＃Day72 おすすめ商品一覧の画像なら探すのが簡単そうと思ったがそうでもなかった。 商品が散りばめられているような画像を想像して探した。 うーんなんかこんなのとか・・ でも配置しているサイズに合わせようとすると1000✖️160のサイズになるので 画像全体…

#Day71 フォトピアで素材を編集することから開始。 前回の日報であげたお手本サイトのような、探すボタンの横に画像を入れたいので、そこの素材を探すことから。 これならできそうと思ったところから始めたつもりだが、まさかのダウンロードしたものをフォト…

#Day70 かなり休んでしまいこのままだとできなくなりそうなので１ミリも進んでなくてもブログを書くことから再開する！ 以前ファーストビューの編集が一旦終わり、次はその下！というところで終わっていた。 今回躓いているところ ・商品の素材がどれを選ん…

#Day69 フィードバックで指摘してもらった部分の直し。 ロゴのドロップシャドウを外す。 初心者はドロップシャドウをつけがちとのこと。 自分でも何となくデザインする時に変化をつけたい→変化をつけるやり方の幅や知識がないので一番簡単なシャドウをつける…

#Day68 フィードバックを読み、ロゴの大きさと文章の揃ってない箇所を直した。 揃えることをもっと念頭に常に置いておかないとすぐズレる。 ロゴはコンテンツの背景色幅に左を揃えた。 ロゴについてどのくらいの大きさが適しているのか明確なサイズはわから…

#Day67 ロゴを仮置きしていたのでよりイメージに近いものにした！ 元々ロゴにハートを入れたかったので近いハートの画像をダウンロードして、以前もらっていたフォトピーのやり方の動画を見ながら色の調整や背景の透過をした。 （WFの時に考えたショップ名と…

＃Day66 可読性を高める手法として背景にグラデーションを入れてみる。 マスクした画像を選択して、”塗り”のところからグラデーションをつけることが可能 線型・放射型・ひし形などグラデーションを入れる箇所も選択可能。 なるべく写真を潰さずに文字を読み…

＃Day65 フィードバックを読んで、文字の大きさを大きくすることだけが差をつける手法ではないと理解。 下の文章を小さくすることも視野にいれて再チャレンジ。 進捗 キャッチコピー”大切なあなたに〜”をサイズ45に変更。 それに合わせて行間を前回の定義で6…

#Day64 ・検索ボックスの幅を合わせる。虫メガネマーク側の幅と右端の幅。 細かい部分まで気づけないなぁと実感。 ・ロゴのグレーを白にする。 現在の過程 まずファーストビューの文字のジャンプ率について調べながら試行錯誤。 あるサイトではジャンプ率が…

#Day63 昨日のアドバイスで、アイコンが揃わないと一人で騒いでいたのは、ベースラインというそもそもの英字の性質によるモノということがわかった。 menuの”m”は合わせた！！ すごい時間かかってたけど理由がわかりスッキリ・・ 検索ボックスはグレーのまま…

#Day62 進捗 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=ckHCYVI2QLuBooxx-1 ・検索ボタンを図形で組み合わせる ・文字の間隔…

#Day61 ファーストビューの文字について ・どちらがメインか ・間を開けている理由 について問われてすぐ回答できなかった 大切なあなたを〜の文章はたったひとつの贈り物をの部分が一番伝えたくて、そのたったひとつってどういう？みたいな流れで下の文章を…

＃Day60 手作り感グッズがわかる 一度この写真で作ることにした。 ・手作り商品感がわかる ・作ったばかり（もしくは作り途中）のようなイメージが生まれてくる子のために用意しているのが伝わるかな・・ ・哺乳瓶＝大体の対象年齢 ・キリンのぬいぐるみや毛…

#Day59 ファーストビューの写真をまたひたすら探す。 このサイトの写真、プレゼントを開けている女の子のワクワク感を想像させる感じが合って素敵だった。 商品も写っていてオーガニックな商品も見せててこれはこのサイトのために撮ったのかなぁ。 PRISTINE…

＃Day58 ヘッダーの右側アイコンを直した。 ヘッダーのみ進捗 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=qZhbyPIFzGOHgNLJ-1…

#Day57 まずコメントを返す。 アイコン周りが色々よくなさそう。 もう一回ここやり直そう最初から。‍ 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…

#Day56 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=CIsuLSLVanVwTMVp-1 フッターが揃っていない気がする。 でもひとつひとつ…

#Day55 時間が空いてしまった！ 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=8UcmoaDSVSlxsSR2-1 前回もらった参考動画を真似…