Saki

2020年7月下旬からWebデザイナーとして働き始めます🌸#シーライクス でデザイン学…

Saki

2020年7月下旬からWebデザイナーとして働き始めます🌸#シーライクス でデザイン学習していました✨noteでは、学習記録をまとめていきます！ バナートレースにも挑戦してます→ http://instagram.com/design_saki

  • 1日1サイトレビュー

    自分の"スキ"を見つけるために、サイトレビュー始めました🌷 デザインを言語化する練習でもあります🐾

  • バナートレース

  • 実践note

  • 30DAYSトライアル

    8月1日から30DAYSトライアルはじめました☀️

#バナーお題に挑戦！ 第一弾

今回は初めて #バナーお題 に挑戦してみたので、 制作過程に考えたことや工夫した点をnoteにまとめておきます！ #バナーお題 とは？ web デザイナーのこばやすさんが 制作バナーのお題を出してくださっている企画のこと！ バナートレースではなく、お題にあったバナーを一から作れるので自分の腕試しになります！ 第一弾：冬季限定 チョコレートバナー→このお題は「普段高い一口チョコが割引価格で購入できる」ことをアピールするためのバナー制作 最初に決められているお題内容は以下に

Saki

    • フィンランド紹介サイトについて

      【追記】👆この卒業制作として作ったサイトは、転職活動時に使用するため、サーバー契約をずっとしていたのですが、無事転職活動も終えたので、契約を2020年7月28日で解約しました！(なのでクリックしていただいても今は見れません) noteには動画を載せられないので、Twitterにサイトの全体を撮った動画を載せています。ここにも記録として残しておくので、もし良かったら見てください✨ 概要 オンラインスクール「SHElikes」の卒業制作として制作した架空サイト「自然・体験・雑貨

      Saki

      • バナートレース14~16 #週末バナトレ

        各バナーの難しかったところ、学び部分はInstagramにまとめています！ 今回は、バナートレース#16の ふわふわな形の作り方を備忘録として残します！ ふわふわな形の凹み部分を滑らかにするやり方が未だわからず・・・ どなたかわかる方いらしたら、教えていただけると嬉しいです！

        Saki

        • バナートレース13 #週末バナトレ

          ◆バナートレース #13 実は前からこのバナーは気になっていたのですが、難しそうだなーと思い、トレースを躊躇していたバナーです！ ぼかし(ガウス)を使用したら思っていたより簡単で来ました！！ ▶背景の作り方手順 ＜感想＞ ・初のぼかし(ガウス)使えた！ ・背景ぼかすことで文字情報の邪魔をしない！ ・フォント探し上手くいった！ ・かわいいらしいデザインだけど、細いセリフ体でかわいすぎない上品さが出てる！ ・60%OFFであることが一目見てわかりやすい！⇒数字部分に特徴的なフ

          Saki

        #バナーお題に挑戦！ 第一弾

        Saki

        マガジン

        • 1日1サイトレビュー
          56本
        • バナートレース
          9本
        • 実践note
          4本
        • 30DAYSトライアル
          7本

        記事

          焼きたてストロベリーチーズタルト｜ベイクチーズタルト｜BAKE CHEESE TART #サイトレビュー

          実際に買った時のパッケージが可愛くて、 サイトも見たらやっぱり可愛かった♡！ので、サイトの全体の印象を簡単に記録と、残しておきたいのでサイト全体のキャプチャも載せておきます。 タルト安定の美味しさでした🍓！ごちそうさまでした♡ #56【サイト全体の印象】 ・余白が多くて写真が映えている ・商品のいちごのカラーを使用していて春らしさも出ている →カラーコード##d8346e ・FVでスクロールすると下画像だけ動く、テキストとロゴは固定 →ロゴをクリックするとベイクチーズタル

          Saki

          焼きたてストロベリーチーズタルト｜ベイクチーズタルト｜BAKE CHEESE TART #サイトレビュー

          Saki

          HOT BISCUITSホットビスケット 公式サイト#サイトレビュー

          #55【サイト全体の印象】 ・暖かみのあるカラー ・各コンテンツ名には異なるイラストで挟まれている 例：(ちょうちょ)CONTENTS(とり) 【メインビジュアル】 ・上部にグローバルメニュー →スクロールしても固定される →ロゴ・各コンテンツメニュー・オンラインショップのリンクが並べられている →オンラインショップが正方形のカラーで表示されていて目立つ仕様に ・FV下部にホットビスケッツとは？の文字だけ出ていて、下コンテンツへの導線になっている 【COLLECTIONコ

          Saki

          HOT BISCUITSホットビスケット 公式サイト#サイトレビュー

          Saki

          バナートレース11～12 #週末バナトレ

          ◆バナー #011 2020年1つ目のトレースということでおめでたいカラーのバナーに挑戦しました！ ▶︎「反射」を使ったグラデーションのやり方 バナー左上のアイキャッチ部分「お得感ゾクゾク！」の箇所のグラデーションは「反射」使っています！ →グラデーションの種類を選択するだけで、いろんなパターンのグラデーションができます！ 参考サイト↓ ▶︎ドット部分は「ドット パターン 無料」で検索して下記サイトでダウンロードして使用しました！ ＜感想＞ ・このアイキャッチの形を作

          Saki

          バナートレース11～12 #週末バナトレ

          Saki

          MEFILAS #サイトレビュー

          【#54】MEFILAS/東京・大阪のWEBサイト制作会社 【サイト全体の印象】(PC) ・とてもシンプルなサイト ・FVから余白が多い ・ページ開いたときに、タイトルの「MEFILAS.」のピリオド部分が強調されて表示される →画面を見ている側からピリオドが落ちてくるようなイメージ ・スクロールしても一見、文字が並べられているだけのように見える ・じっくり文字を追って、マウスオーバーするとびっくり！ →文章内容のイメージが背景に出てくる！！ →下コンテンツへの導線になって

          Saki

          MEFILAS #サイトレビュー

          Saki

          TEETER TOTTER #サイトレビュー

          ★サイトレビューについて →毎日サイトレビューは続ける自信がないので、できる時間に気になったサイトのレビューをしていこうと思います。 →私が好きだな〜と思ったサイトをメモしておきたいのと、どうして好きだと思ったのか言語化する練習として始めます。 →いつまで続けられるかわかりませんが、言語化する練習としてなるべく続けられるように頑張ります！ 【#53】TEETER TOTTER /治療と運動指導の専門家によるコンディショニングサービスの場HP 【サイト全体の印象】 ・ボタン

          Saki

          TEETER TOTTER #サイトレビュー

          Saki

          バナートレース10 #週末バナトレ

          ◆ミラクル割クーポンバナー #10 グラデーションの作り方を知りたくて、このバナーに挑戦！ ▶︎背景のグラデーションの作り方 →とても簡単にできて感動した！ ＜色を逆向きに設定したい場合＞ オプションバーにある☑︎逆方向にチェックを入れると逆向きに設定できる！ グラデーションの形を変えることも簡単にできそうだったので、 他で練習したいと思います！ ▶︎文字を背景の柄で切り抜く方法 ＜感想＞ ・この色合いのバナーとってもタイプでした◎ ・数字のフォント選びに苦戦しま

          Saki

          バナートレース10 #週末バナトレ

          Saki

          2019.10月　振り返り&宣言

          10月をゆるく振り返ってみる10月は毎週何かしら刺激的な予定が入っていて、いろんな意味で忙しかったです。イベントに行ったり、もくもく会に行ったり、デザイナーの集まるバーに行ってみたり....人に会う機会が前に比べて多くなったな〜と今年に入って何度も感じています。特に、初めましての方と会うと、新たな刺激を頂けて、「私ももっと頑張らなきゃ！」とやる気が湧いてくるのでどんどん人に会っていろんな人とお話するべきだと改めて感じれる月でした。 私自身人見知りするので、初対面の人が多くい

          Saki

          2019.10月　振り返り&宣言

          Saki

          有限会社コスモ建設 #サイトレビュー

          ・家のマークと素材である木のマークが組み合わさったシンプルなロゴ ・グローバルナビは右側に110×100の四角形が4つ並んでいる →アイコンとコンテンツ名が記載されていて、配色がやさしい色合い (WORK#88c4da / FURNITURE#92cfc0 / ABOUT US#efd042/ CONTACT#f7c1b6 / BLOG#c7c7df) ・mainvisual / field / footerの構成 ・field部分は背景の上に大きな長方形が敷かれていて、その

          Saki

          有限会社コスモ建設 #サイトレビュー

          Saki

          バナートレース8~9 #週末バナトレ

          ◆DHC無料お試しキャンペーンバナー #08 ▶︎「キレイにぐーんと〜」の部分は今回白抜き文字で作りました！ (境界線をつける、でもできたのかな？？)白抜き文字はKAORIさんの投稿を参考に作りました！(企画バナーのBeforeAfterのnoteでも同じやり方使ってます) ＜感想＞ ・黒字でも#000を使っていない ・フォントをまとめられた！ ・切り抜き方２つを久しぶりにおさらいできた ・商品パッケージと同じ色をフォントでも使用することでまとまりが出る ・「無料でお試し

          Saki

          バナートレース8~9 #週末バナトレ

          Saki

          バナートレース5~7 #週末バナトレ

          ◆キャンペーンバナー #05 ▶︎「生活雑貨・キッズファッションを買うなら今」部分の影の作り方 長方形にドロップシャドウをつけて影を作りました。 ◆まとめ割クーポンバナー #06 ▶︎曲線の文字の作り方 ＜感想＞ ・情報がまとまっていて見やすい！ ・アーチ型の文字やリボンでの囲み、点線の枠など、細かい部分のデザインがかわいいと思った！ ・Coupon!部分が少し斜めになっているのも、動きが出ると感じた！ ・他のパターンにも応用が利きそうなバナーデザイン ◆クーポンで

          Saki

          バナートレース5~7 #週末バナトレ

          Saki

          企画バナーのBeforeAfter#スキルアップウィーク #2

          前回に引き続き、KAORIさんが企画してくださった"SKILL UP WEEK"に今回も参加し、私が制作したバナーのBeforeAfterをまとめました！ ▶︎私が参加したお題ケーキセットの案内バナー​ ▶︎お題の依頼内容・文言は下記3点のみ入れること(どこで文言を切るかはお任せ) ー お得に美味しく、ケーキセット 14:00~ ー 選べるドリンク +250円 ー NEW ストロベリータルト ・ナチュラルな雰囲気のおしゃれなカフェ、秋のほっこり感もあるとGOOD ・使用フ

          Saki

          企画バナーのBeforeAfter#スキルアップウィーク #2

          Saki

          バナートレース3~4 #週末バナトレ

          ◆10%OFF COUPONバナー #03 ▶︎背景のボーダーの作成方法 参考にしたサイトも貼っておきます。 ▶︎10%OFF部分の重ね方 ①元のレイヤーを一個完成させたら、optionキーを押しながら画像を動かす →色やフォント、カーニング等そっくりそのままコピーができます！ ②コピーした画像の色を別色に指定して、元レイヤーの後ろに設定 ③見本画像を参考にどの位置に設定されているか測って、配置する！ ＜感想＞ ・フォントを似たものにするために、いろんなフォントを使

          Saki

          バナートレース3~4 #週末バナトレ

          Saki