しばこ

未経験からのWEBデザイナー3年目。制作会社で日々奮闘しています。 http://shiba-co-jp.net/

しばこ

未経験からのWEBデザイナー3年目。制作会社で日々奮闘しています。 http://shiba-co-jp.net/

サイトトレース分析 2022 vol.5-2

前回の記事の続きです 今回トレース&分析したサイトアイグッズ株式会社 実際トレースしたページ ※2022年7月12日現在、FVのみの作成です ・💻PCページ ・📱SPページ 見出し 中央揃えと縦揃え、レイアウトに応じて変化していますが違和感は全くなし。 あしらいスッキリと見やすいレイアウトのため、単調に見えすぎるデメリットをカバーするためのあしらいが素敵だなと思ったのでメモ。 事業紹介 背景に英字が流れています hoverすると、該当のテキストに塗りが。 それ以

しばこ

    • サイトトレース分析 2022 vol.5-1 ブランド分析篇

      先日デザインにおける「ブランド定義」の重要さを学んだので、 今回から、そのサイトのコンセプトや強み・ターゲットを踏まえた上で デザイン分析を行なっていこうと思います。 また、全部をトレースしようとすると更新止まるので今回から セクションごとに分析してアップしていくスタイルで進めていきます... 今回トレース&分析したサイトアイグッズ株式会社 グッズ製作を担う会社のサイト。 ターゲットに合わせて 見やすさ / 信頼性 が前面にられます。 特に ・グリッドの引き方 ・文字の

      しばこ

      • サイトトレース分析 2022 vol.4

        更新止まっていました… GW以降スランプなのか、熱量が消失してしまってました。 が、徐々に回復してきたのでまた頑張ります。 4月にコツコツ書いていたサイトレビュー・トレースがあるので今更ですがそちらをアップさせていただきます。 概要今回トレース&分析したサイト ファンでもあるUNIELさんが経営するコンセプトショップのECサイト。 グリッドに沿ったレイアウトが特徴的で、 「モノや空間を通して持続可能な価値を創造・提案できる場所を目指す」 というコンセプトにマッチした、無

        しばこ

        • サイトトレース分析 2022 vol.3

          1ヶ月以上空いちゃいました。(笑) 納期バタバタだったのと、アルセウスが楽し過ぎて....(言い訳) 諦めずに、まったりゆったり更新していきます。 今日トレースしたのはこちらのサイト。 まとまりのある、淡い落ち着いた配色と程よい余白、読みやすさと少しズラしを加えてあえて注目させているテキスト。派手ではなく、じんわりと変化するアニメーション。 ブランドのコンセプト・世界観が絶妙に表現されたサイトになっています。 今回はパーツごとに気になった点を考察していこうと思います。

          しばこ

          サイトトレース分析 2022 vol.2

          トレースしたサイト ※サムネイルエリアのみトレースしています。 ・PCデザイン プレビュー (Figma) ・SPデザイン プレビュー (Figma) インパクトのあるメインビジュアルはもちろん 高級感を感じることのできるデザインは、細かなこだわりが見え、総合的にブランディングが上手に再現されているサイト。 これをShopifyで作成したのも驚き... 高級感を演出するこだわり様々な要素が組み合わさって、高級感がうまく表現されています。 今回は、自分なりにそのポイントを

          しばこ

          サイトトレース分析 2022 vol.2

          しばこ

          サイトトレース分析 2022 vol.1

          2022年が始まりました。 昨年と比べ、少し仕事の効率も上がってきたので 隙間時間にコツコツインプットを増やしていこうと思います！ 概要今回トレースしたサイト：BEAMS BEAUTY 美容をテーマにしたメディアサイト。美容を題材にしつつも、BEAMSのファッション性も加味されたサイトになっている。 ※今回は「サムネイル」に着目するため、サムネイル箇所のみトレース PC モバイル サムネイルのデザイン・トンマナ コンテンツごとにメリハリがつくよう、トンマナは保ちつ

          しばこ

          サイトトレース分析 2022 vol.1

          しばこ

          10月の学習まとめ

          あっという間に今年もあと2ヶ月。 そんな私は8月でデザイナー2年目になりました。 そこで10月から月1で学習したことをまとめて発信していこうと思います。 01. 危機感を感じた今の自分学びのまとめ発信を決めたきっかけは 危機感 から。 デザイナーとして働いて1年がすぎ目の前のことに追われてインプットが格段に減りました。 「とりあえず完成させよう」という気持ちが先行し 「こだわる方法」が全然わからないままここまできた気がします。 このままではいかん。 気持ちを改めて、き

          しばこ

          10月の学習まとめ

          しばこ

          デザイナーになって4ヶ月を振り返ってみたお話。

          しばこと申します。 とある都内の制作会社のデザイナーとして未経験で入社し働いています。 スキル不足にも関わらず、ページデザイン、コーディング、ロゴ作成、ECサイト構築などいろいろな業務を任され、充実した日々です。 それもこれも、社長を初め先輩方に支えられているおかげです。 恵まれた環境に感謝。 (そしてまだまだ実力不足を痛感する日々です) 今回は、働き始めて4ヶ月経って、学んだこと、今後力を入れたい点をこれまでの案件を通して振り返っていこうと思います。 1. 下層ページデ

          しばこ

          デザイナーになって4ヶ月を振り返ってみたお話。

          しばこ

          「体感」を通して学ぶ！銀行アプリ比較

          日々様々なUI/UXに触れ、体感しますが、 今回は特に私が優れてるなと感動したりそな銀行のアプリに着目。 他社アプリと比較しつつ、UXの考え方や、経営を考慮した際の設計の難しさをまとめてみました。 今回軸として考えるアプリ、りそな銀行アプリ team-lab.com/resonasmartapp/ チームラボさんが設計したとのことで、 こちらの記事に詳しい経緯やバックグラウンドが説明されています。 2018年にはグッドデザイン賞を受賞しています。 そして比較するのが三井

          しばこ

          「体感」を通して学ぶ！銀行アプリ比較

          しばこ

          【3分の１・左右対称の法則】～レイアウトから学ぶデザインセオリー～

          「大抵のレイアウトは3分の位置の法則を使えば綺麗に見える」 「中央分割で唯一綺麗なレイアウトは左右対称」 ということを、スクールの講師から学びました。 それを意識して様々なデザインに着目すると多くのデザインが3分の1の法則を使っていました。 ◼️3分の1の法則って？文字より見る方が早いのでリプトンさんのバナーを拾って、縦横3分割にしてみました。 まずは下のバナーをご覧ください。 1/3に区切ってみてみます。 ・左にマフィン、右にアップルパイが横1/3, 縦2/3に大体

          しばこ

          【3分の１・左右対称の法則】～レイアウトから学ぶデザインセオリー～

          しばこ

          [css]縦書きと -webkitの正体。

          どうも。WEBデザイナーを目指しているバリバリ初心者のしばこです。 現在ポートフォリオサイト作成で試行錯誤しているのですが、よくかっこいいサイトでみる、縦書きをマネしてみました。 （ミーハーなのです。） コードはこちら。 nav li{ font-family: 'Poiret One', cursive; writing-mode: vertical-rl; float:left; color:black; text-decoration: non

          しばこ

          [css]縦書きと -webkitの正体。

          しばこ

          バナートレースしてみた　その２

          相変わらず残業の日々ですが、週末時間を使ってちょこちょこ更新。 今回はスクールの先生に直接質問して得た知識がたくさんあるので 備忘録としてメモ。 ■003　/ オロナミンC 元バナー　　 トレース後 制作時間・・・1時間 // 気付いたこと // ・商品のパッケージと同じ色を用いることで、その商品だと一目でわかる ・遠近法を使うことで迫力がでている ・全体的に色のコントラストの使い方が上手。 //学んだ技術// ・フォトショとイラレの再現方法の違い 以下●→イラレで

          しばこ

          バナートレースしてみた　その２

          しばこ

          バナートレースをしてみた　001/002

          はじめまして。 ＷＥＢデザイナーを目指している、しばこです。 初note。まだ自己紹介も何も投稿していませんが、noteなだけに 自分の備忘録として、バナートレース得たポイントなどを描いていきます。 ■001　/ iLumine会員特別セール ↑元バナー　　↓トレース後 制作時間・・・1時間 // 気付いたこと // ・さし色を1行だけ使うことで、強調したいポイントが目立っている ・写真などは使わず、シンプル化することでセール案内が協調されている ・全体的に色のコント

          しばこ

          バナートレースをしてみた　001/002

          しばこ