しばこ

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

しばこ

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

記事一覧

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

前回の記事の続きです 今回トレース&分析したサイトアイグッズ株式会社 実際トレースしたページ ※2022年7月12日現在、FVのみの作成です ・💻PCページ ・📱SPページ 見…

しばこ
1年前
1

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

先日デザインにおける「ブランド定義」の重要さを学んだので、 今回から、そのサイトのコンセプトや強み・ターゲットを踏まえた上で デザイン分析を行なっていこうと思いま…

しばこ
1年前

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

更新止まっていました… GW以降スランプなのか、熱量が消失してしまってました。 が、徐々に回復してきたのでまた頑張ります。 4月にコツコツ書いていたサイトレビュー・…

しばこ
1年前

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

1ヶ月以上空いちゃいました。(笑) 納期バタバタだったのと、アルセウスが楽し過ぎて....(言い訳) 諦めずに、まったりゆったり更新していきます。 今日トレースしたのはこ…

しばこ
2年前
3

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

トレースしたサイト ※サムネイルエリアのみトレースしています。 ・PCデザイン プレビュー (Figma) ・SPデザイン プレビュー (Figma) インパクトのあるメインビジュアル…

しばこ
2年前
3

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

2022年が始まりました。 昨年と比べ、少し仕事の効率も上がってきたので 隙間時間にコツコツインプットを増やしていこうと思います! 概要今回トレースしたサイト:BEAMS …

しばこ
2年前
3

10月の学習まとめ

あっという間に今年もあと2ヶ月。 そんな私は8月でデザイナー2年目になりました。 そこで10月から月1で学習したことをまとめて発信していこうと思います。 01. 危機感を感…

しばこ
2年前
3

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

しばこと申します。 とある都内の制作会社のデザイナーとして未経験で入社し働いています。 スキル不足にも関わらず、ページデザイン、コーディング、ロゴ作成、ECサイト構…

しばこ
3年前
8

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

日々様々なUI/UXに触れ、体感しますが、 今回は特に私が優れてるなと感動したりそな銀行のアプリに着目。 他社アプリと比較しつつ、UXの考え方や、経営を考慮した際の設計…

しばこ
3年前
9

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

「大抵のレイアウトは3分の位置の法則を使えば綺麗に見える」 「中央分割で唯一綺麗なレイアウトは左右対称」 ということを、スクールの講師から学びました。 それを意識…

しばこ
5年前
20

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

どうも。WEBデザイナーを目指しているバリバリ初心者のしばこです。 現在ポートフォリオサイト作成で試行錯誤しているのですが、よくかっこいいサイトでみる、縦書きをマ…

しばこ
5年前
6

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

相変わらず残業の日々ですが、週末時間を使ってちょこちょこ更新。 今回はスクールの先生に直接質問して得た知識がたくさんあるので 備忘録としてメモ。 ■003 / オロナ…

しばこ
5年前
6

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

はじめまして。 WEBデザイナーを目指している、しばこです。 初note。まだ自己紹介も何も投稿していませんが、noteなだけに 自分の備忘録として、バナートレース得たポ…

しばこ
5年前
4
サイトトレース分析 2022 vol.5-2

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

前回の記事の続きです

今回トレース&分析したサイトアイグッズ株式会社

実際トレースしたページ
※2022年7月12日現在、FVのみの作成です
・💻PCページ
・📱SPページ

見出し
中央揃えと縦揃え、レイアウトに応じて変化していますが違和感は全くなし。

あしらいスッキリと見やすいレイアウトのため、単調に見えすぎるデメリットをカバーするためのあしらいが素敵だなと思ったのでメモ。

事業紹

もっとみる
サイトトレース分析 2022 vol.5-1 ブランド分析篇

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

先日デザインにおける「ブランド定義」の重要さを学んだので、
今回から、そのサイトのコンセプトや強み・ターゲットを踏まえた上で
デザイン分析を行なっていこうと思います。

また、全部をトレースしようとすると更新止まるので今回から
セクションごとに分析してアップしていくスタイルで進めていきます...

今回トレース&分析したサイトアイグッズ株式会社

グッズ製作を担う会社のサイト。
ターゲットに合わせ

もっとみる
サイトトレース分析 2022 vol.4

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

更新止まっていました…
GW以降スランプなのか、熱量が消失してしまってました。
が、徐々に回復してきたのでまた頑張ります。

4月にコツコツ書いていたサイトレビュー・トレースがあるので今更ですがそちらをアップさせていただきます。

概要今回トレース&分析したサイト

ファンでもあるUNIELさんが経営するコンセプトショップのECサイト。
グリッドに沿ったレイアウトが特徴的で、
「モノや空間を通して

もっとみる
サイトトレース分析 2022 vol.3

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

1ヶ月以上空いちゃいました。(笑)
納期バタバタだったのと、アルセウスが楽し過ぎて....(言い訳)
諦めずに、まったりゆったり更新していきます。

今日トレースしたのはこちらのサイト。

まとまりのある、淡い落ち着いた配色と程よい余白、読みやすさと少しズラしを加えてあえて注目させているテキスト。派手ではなく、じんわりと変化するアニメーション。
ブランドのコンセプト・世界観が絶妙に表現されたサイト

もっとみる
サイトトレース分析 2022 vol.2

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

トレースしたサイト
※サムネイルエリアのみトレースしています。

・PCデザイン プレビュー (Figma)
・SPデザイン プレビュー (Figma)

インパクトのあるメインビジュアルはもちろん
高級感を感じることのできるデザインは、細かなこだわりが見え、総合的にブランディングが上手に再現されているサイト。
これをShopifyで作成したのも驚き...

高級感を演出するこだわり様々な要素が組

もっとみる
サイトトレース分析 2022 vol.1

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

2022年が始まりました。
昨年と比べ、少し仕事の効率も上がってきたので
隙間時間にコツコツインプットを増やしていこうと思います!

概要今回トレースしたサイト:BEAMS BEAUTY

美容をテーマにしたメディアサイト。美容を題材にしつつも、BEAMSのファッション性も加味されたサイトになっている。

※今回は「サムネイル」に着目するため、サムネイル箇所のみトレース

PC

モバイル

サム

もっとみる
10月の学習まとめ

10月の学習まとめ

あっという間に今年もあと2ヶ月。
そんな私は8月でデザイナー2年目になりました。
そこで10月から月1で学習したことをまとめて発信していこうと思います。

01. 危機感を感じた今の自分学びのまとめ発信を決めたきっかけは 危機感 から。
デザイナーとして働いて1年がすぎ目の前のことに追われてインプットが格段に減りました。

「とりあえず完成させよう」という気持ちが先行し
「こだわる方法」が全然わか

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

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

しばこと申します。
とある都内の制作会社のデザイナーとして未経験で入社し働いています。
スキル不足にも関わらず、ページデザイン、コーディング、ロゴ作成、ECサイト構築などいろいろな業務を任され、充実した日々です。
それもこれも、社長を初め先輩方に支えられているおかげです。
恵まれた環境に感謝。
(そしてまだまだ実力不足を痛感する日々です)

今回は、働き始めて4ヶ月経って、学んだこと、今後力を入れ

もっとみる

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

日々様々なUI/UXに触れ、体感しますが、
今回は特に私が優れてるなと感動したりそな銀行のアプリに着目。
他社アプリと比較しつつ、UXの考え方や、経営を考慮した際の設計の難しさをまとめてみました。

今回軸として考えるアプリ、りそな銀行アプリ
team-lab.com/resonasmartapp/

チームラボさんが設計したとのことで、
こちらの記事に詳しい経緯やバックグラウンドが説明されていま

もっとみる
【3分の1・左右対称の法則】~レイアウトから学ぶデザインセオリー~

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

「大抵のレイアウトは3分の位置の法則を使えば綺麗に見える」
「中央分割で唯一綺麗なレイアウトは左右対称」
ということを、スクールの講師から学びました。

それを意識して様々なデザインに着目すると多くのデザインが3分の1の法則を使っていました。

◼️3分の1の法則って?文字より見る方が早いのでリプトンさんのバナーを拾って、縦横3分割にしてみました。
まずは下のバナーをご覧ください。

1/3に区切

もっとみる

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

どうも。WEBデザイナーを目指しているバリバリ初心者のしばこです。

現在ポートフォリオサイト作成で試行錯誤しているのですが、よくかっこいいサイトでみる、縦書きをマネしてみました。
(ミーハーなのです。)

コードはこちら。

nav li{ font-family: 'Poiret One', cursive; writing-mode: vertical-rl; float

もっとみる

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

相変わらず残業の日々ですが、週末時間を使ってちょこちょこ更新。
今回はスクールの先生に直接質問して得た知識がたくさんあるので
備忘録としてメモ。

■003 / オロナミンC

元バナー  

トレース後
制作時間・・・1時間

// 気付いたこと //
・商品のパッケージと同じ色を用いることで、その商品だと一目でわかる
・遠近法を使うことで迫力がでている
・全体的に色のコントラストの使い方が上手

もっとみる

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

はじめまして。

WEBデザイナーを目指している、しばこです。
初note。まだ自己紹介も何も投稿していませんが、noteなだけに
自分の備忘録として、バナートレース得たポイントなどを描いていきます。

■001 / iLumine会員特別セール

↑元バナー  ↓トレース後
制作時間・・・1時間

// 気付いたこと //
・さし色を1行だけ使うことで、強調したいポイントが目立っている
・写真な

もっとみる