kaoru

Web / Graphic Designer。noteではアウトプットを優先で、地道に頑張っていこうかと。Twitter:https://twitter.com/anfang0k

kaoru

Web / Graphic Designer。noteではアウトプットを優先で、地道に頑張っていこうかと。Twitter:https://twitter.com/anfang0k

  • 1DAY1DESIGN

    日々、秀逸なWebデザインをトレースしている記事まとめ。

メニューのデザインに最近お熱。なんやかんやで記念すべき５０記事目。そんなもしゃ模写。#1day1design-50

５０記事目到達。４月の１５日からはじめて、いよいよ５０記事目。 適当な理由つけて休んだことはなく、土日祝日は作業しませんでしたが、それはそれでも結構頑張ったんじゃないか、私。 毎日書いている人にとってはなんてことないかもしれないんですが、あまり器用ではない私にとってこのトレース。 １．サイトをトレースしたいサイトを探す。 →大体２０分ぐらいかかる。 ２．サイトをトレースする。 →chromeの検証ツール＋スクリーンショットをとって１つ１つの要素を調べながら対応。 →２０

kaoru

    • 素敵なグラデーションから広がるデザインを観察。そんなもしゃ模写。#1day1design-49

      グラデーションで時代を感じる。ウェブの勉強を始めた頃のデザインと。 今はやっているグラデーションを見ていると、同じグラデーションの表現なのに時代を感じる、っていうことないでしょうか？？ ランダムに色がとっちらかっているグラデーションもあれば、色の深みがぜんぜん違う表現にいつもいつも喜ばせてくれる、そんな素敵なグラデーション。 一度間違えれば一気にダサくなる、なかなか扱いが難しいグラデーションですが。今日は素敵な、真似したくなるサイトを観察。 そんな、４９日目。 今回作

      kaoru

      • キャッチコピー第2弾。写真も添えられてよりグッと来る。そんなもしゃ模写。#1day1design-48

        キャッチコピーに魅せられて。前から言っていたかも知れないのですが。自分は結構文字が主体のデザイン大好物だったりします。フォントがそもそも好き、ていうのもあるんですが。 デザインを始める際に、普通の人だったらあんまり好きじゃない。ストリートアート、ていうのが結構好きで。 ただ「LOVE」とか書いてある文字も、素敵なグラフィックに仕上げてくる、そんな夢広がるアートみたいな表現が好きで、ついつい追っちゃうんですが。 ということで、興味津々なキャッチコピーテイストのサイトを今日

        kaoru

        • シンプルなレイアウトに、刺さるキャッチコピー。そんなもしゃ模写。#1day1design-47

          意図的に長い、ボディーコピー。もう随分前になるかも知れませんが。 hondaの「負けるもんか」ていうPV及び制作物ってみられたことありますか？？ 特に奇抜なビジュアルをしているわけでもなく、コピー一つで勝負しているこの広告。 言葉がそもそも「負けるもんか」という刺さるものに対して、ビッシリと押し寄せてくるようなボディーコピー。文章としてはそこそこ多いのに、ついつい読んでしまう。 どうしてもウェブのデザインって、ビジュアル！イラスト！３D！、とか抽象的じゃないですが。そう

          kaoru

        • メニューのデザインに最近お熱。なんやかんやで記念すべき５０記事目。そんなもしゃ模写。#1day1design-50

          kaoru

        • 素敵なグラデーションから広がるデザインを観察。そんなもしゃ模写。#1day1design-49

          kaoru

        • キャッチコピー第2弾。写真も添えられてよりグッと来る。そんなもしゃ模写。#1day1design-48

          kaoru

        • シンプルなレイアウトに、刺さるキャッチコピー。そんなもしゃ模写。#1day1design-47

          kaoru

        マガジン

        • 1DAY1DESIGN
          49本

        記事

          クラフト味を感じ、味のある表現をより良くする装飾。そんなもしゃ模写。#1day1design-46

          クセがあるから顔になる。手書きのような、フリーハンドで描かれた文字、っていうのは。ただそれがあるだけで味がある表現にもなり、世界観をガッツリ表現してくれる、そんなデザインの装飾だと思っていて。 ただ、その分その世界観をちゃんと保つ、崩さない表現が大事になる、個人的になかなか難しく。最近のウェブサイトのリクルートとかでメッセージ性のある、刺さるイメージで捉えていたんですが。 今回トレースしたサイトはオリーブオイルの、ツンとしておらず。どこか親しみのある柔らかい表現にマッチし

          kaoru

          クラフト味を感じ、味のある表現をより良くする装飾。そんなもしゃ模写。#1day1design-46

          kaoru

          １画面で魅せたいものを惜しみなく。そんなもしゃ模写。#1day1design-45

          梅雨を感じさせる今日このごろ。雨自体は嫌いではないのですが、風も伴う雨はちょっと嫌い。 そんな週明けの月曜いかがおすごしでしょうか？ 休み明けなので、XD扱うのもちょっとボケるかと思ったら、まるで手足のように（言い過ぎか）扱えていてちょっとびっくり。 ここ最近Photoshopを最新のverにしてから、何かと不具合がおおく・・・ロールバックしてもなかなか都合のいいものにならず、ちょっと憂鬱ですが。今週も頑張っていきたい所存。 そんな４５日目。 今回作成したデザイン。

          kaoru

          １画面で魅せたいものを惜しみなく。そんなもしゃ模写。#1day1design-45

          kaoru

          背景に敷かれた薄いラインにそった整然としたキレイなレイアウト。そんなもしゃ模写。#1day1design-44

          見えるようで見える線。 見せる線でややこしい話なんですが、背景にうすーい線を敷いたデザイン。要素の整列だったり、位置のラインなどなど… 何かと意味を感じられ、整然としたレイアウトを意識させるこのデザイン。 最近デザインでもよくある、わざと要素をずらしてみせるレイアウトもあるあるなんですが。整然と綺麗にレイアウトされたサイト、ってこう…何も言わず「素敵、信頼感」と感じざるを得ない、何かを感じますよね。 そんな、４４日目。 最近をひをまたぎそうでヒヤヒヤ。 今回作成し

          kaoru

          背景に敷かれた薄いラインにそった整然としたキレイなレイアウト。そんなもしゃ模写。#1day1design-44

          kaoru

          ウィンドウサイズの可変を意識してレイアウトを組む。そんなもしゃ模写。#1day1design-43

          当たり前になってるレスポンシブデザイン。もうだいぶ前になってしまうんですが、いつぞやまでは。パソコン・スマートフォン、って別々に切り分けされていたんですが。 今はレスポンシブデザインが当たり前。また閲覧するディスプレイの幅がどんどん広がっていき、フルHDが基本になりつつある中。 最小のディスプレイでも、効果的に見えるように。デザインの横幅を意識しながらデザインしていくんですが。実際にデザインを起こす際に「どの部分は拡大させて、一切させない部分を出すか」とかとか。 案件や

          kaoru

          ウィンドウサイズの可変を意識してレイアウトを組む。そんなもしゃ模写。#1day1design-43

          kaoru

          配色の際に色ってしぼりがちだけど、細かく設定してみるのも良き。そんなもしゃ模写。#1day1design-42

          何かと絞りがちな配色事情。個人的な話になるかもなんですが…。 サイトをデザインする際に、自分の場合使う色はかなり絞る方で、メインで使う色は１色、差し色として２色目…あとは極力使わない、あっても灰色とかで体裁を整えるタイプなんですが。 それは実際の構築の際に、あっちこっち色が違ってしまったら構築を担当するエンジニアに迷惑がかかる、というのはもちろんなんですが。色が多すぎると統一性が保てない、ていうところもあって。 なかなかに難しいと思っている中、トーンは同じでも明度など細

          kaoru

          配色の際に色ってしぼりがちだけど、細かく設定してみるのも良き。そんなもしゃ模写。#1day1design-42

          kaoru

          スクロールした際のナビゲーションの変化もおもしろい。そんなもしゃ模写。#1day1design-41

          細かいところの気配りが細かい。スクロールした際にナビゲーション部分が変化する、ってよくある動きなんですが。実際に変化した際の細かいデザイン、挙動だったりって、細かすぎて目につかない分、トレースでサイトを探している際に最近はよくサイトを見る癖がついており、今回目に止まったのがこちら。 そもそもトップページのデザインの素晴らしさはそうなんですが、下層、フッター周りのデザインも良く、marginなどなど…ちょっと学ばせていただけたらと思い、今日もトレース。 そんな、４１日目。

          kaoru

          スクロールした際のナビゲーションの変化もおもしろい。そんなもしゃ模写。#1day1design-41

          kaoru

          1日1模写も２ヶ月目、続けることを目標に。そんなもしゃ模写。#1day1design-40

          2ヶ月記念。なんやかんやで、まだ投稿数４０ちょいのショッパイものですが…ようやく、2ヶ月目を迎えることが出来ました。 目標はまだまだ先なんですが、続けられたことをとりあえず祝したい…。 やっている時間よりも。やる前の「やるぞ！」て思い立たせることが本当に大変です。すーぐサボる口実を考えてしまうので。本当に自分という人間をいかにヨイショするのが大事。 毎日ブログ書いている、毎日動画投稿している、やってみるとわかります。あれは常人が思っているよりもものすごい大変です。誘惑が

          kaoru

          1日1模写も２ヶ月目、続けることを目標に。そんなもしゃ模写。#1day1design-40

          kaoru

          ヘッダーの位置が下にあることで、ビジュアルを魅力的に魅せる。そんなもしゃ模写。#1day1design-39

          デザインするときになかなかやらない、独特なレイアウト。Webのデザイン、って見る人の動線のことを考えて。F視点でレイアウトを作っていくことが多く。他のサイトを良くご覧になっている方ならご存知だと思いますが、それぐらい上にヘッダーがあったり、メニューがあったり。それをすることでとても便利なナビゲーションになっているんですが。 ただそれによって、Webのデザインの魅せ方がどのサイトも近く、オリジナリティ、という部分で見ると似たりよったりなので個性を出しづらく。 そこをうまーく

          kaoru

          ヘッダーの位置が下にあることで、ビジュアルを魅力的に魅せる。そんなもしゃ模写。#1day1design-39

          kaoru

          シンプルなレイアウトながら、記事１つ１つが雑誌の表紙のよう。そんなもしゃ模写。#1day1design-38

          クオリティ高いサムネイルは人を惹き付ける。デザインのレイアウトとしては斬新なことはしておらず、以前紹介したスプリットレイアウトを用いたレイアウト。飾りも特になく、シンプルに徹した上で各コンテンツごとの余白周りも広すぎなく、狭過ぎもなく。 ただ１つ１つの記事のサムネイルがとても強烈で、本屋に並んでいる雑誌の表紙のような。高いクオリティの写真に邪魔をしないけど、メッセージを訴えかけるタイトルまわりの体裁が良き… いや、前半で最近デザイン説明ばかりしていてもあれなので、さっそく

          kaoru

          シンプルなレイアウトながら、記事１つ１つが雑誌の表紙のよう。そんなもしゃ模写。#1day1design-38

          kaoru

          レイアウトがそもそも独特なのに、ナビゲーションも気になるサイト。そんなもしゃ模写。#1day1design-37

          一時期ぽっと火がついたようなレイアウト。ちょっと前…2年ほど前にまとめサイトでよく見るようになった、左・右に縦メニューのこちらのレイアウト。 自分も以前このようなレイアウトでサイトをデザインしたことがあり、それがこちらなんですが。 流行にあやかって、そもそも一時期だけの限定公開サイトだったので思い切ったレイアウトをやってみよう、でトライしてみたんですが。 ナビゲーションも含めて、サイトを閲覧しているユーザーにとっても扱いやすいし、魅せるレイアウトをも作りやすい。自分が作

          kaoru

          レイアウトがそもそも独特なのに、ナビゲーションも気になるサイト。そんなもしゃ模写。#1day1design-37

          kaoru

          １度はデザインしてみたい、結婚関連のサイト様。そんなもしゃ模写。#1day1design-36

          そういえば携わったことがなかった。お仕事の兼ね合いだったり、所属している会社だったり、で。１度も携わったことがないサービスのサイト様だったので思わずトレース。 人生に１度、大事なターニングポイントでもある、結婚。 以前専門学校の知り合いが結婚式の専属カメラマンになった際は、あまりにプレッシャーに鬱になって職をやめた話を聞き。結婚式、そう結婚ということの重大さを身にしみて感じたわけで。 じゃあ、ウェブサイトをデザインする人たちはどうなんだろう…？なんて思う次第。実際に結婚

          kaoru

          １度はデザインしてみたい、結婚関連のサイト様。そんなもしゃ模写。#1day1design-36

          kaoru

          動きも踏まえてデザインするということ。そんなもしゃ模写。#1day1design-35

          静止画だけじゃ伝わらない不思議なもの。長いこと、自分はウェブデザイナーになる前は出版社で雑誌のデザインを長く携わっていたこともあり。昨今のウェブデザインは”動きありき”のデザインが大事になってきた中で。 デザインをアウトプットする際に、静止画、だけじゃどうしてもエンジニアさんにもディレクターにも、最終的なアウトプットが見えにくく…実際に構築が出来上がった際も「あれ？これでよかったっけ？」なんて思うこともしばしばあるんじゃないかなぁと。 その中で、今回トレースさせていただい

          kaoru

          動きも踏まえてデザインするということ。そんなもしゃ模写。#1day1design-35

          kaoru