RYOKI

銀行員からWEBデザイナーになるため勉強中！勉強記録だったり、読んだ本の書評なども書い…

RYOKI

銀行員からWEBデザイナーになるため勉強中！勉強記録だったり、読んだ本の書評なども書いていければなと思います！

  • 記事ストック

  • オリジナルバナー

  • バナートレース

  • 授業復習

  • 書評

すべてのマガジンを表示

第3回オリジナルバナー制作

3つ目のオリジナルバナー！ 今回のお題は、Webスクールのバナーです。 ＜要望＞ 文章 ・通学できる、卒業がないWebスクール ・webデザイナー/フリーランスになりたい人向け ・今なら早割キャンペーン中 ・無料説明会はこちら 色味 ・オレンジ/黄色系 サイズ ・300×250 オリジナル ＜意識したこと＞ ・オレンジ、黄色系の色味ということだったので、全体はオレンジで、ワンポイントで黄色を使いました。その際、どちらも明るすぎると見にくそうだったので、オレンジは暗め

RYOKI

    • 第2回オリジナルバナー制作

      2個目のオリジナルバナーです。 今回はオンラインでリアルタイムにフィードバックをいただきました！ 自分以外の方のフィードバックも見ることができたので、すごく勉強になりました。 同じテーマでも10人いれば10通りのデザインができるのが面白いな〜 お題：『スポーツジム』 作成したものがこちら。 ＜工夫した点＞ ・「GRAND OPEN」を1番推したいポイントにしたので、「入会金0円」や「無料体験」などの文言は、小さめにして『GRAND OPEN』が目立つようにした ・文字色

      RYOKI

      • 第1回オリジナルバナー制作

        こんばんは。流行りのコロナ太りを感じ始め、焦り始めています。 最近コーダーのお仕事メインでやりたいなーという考えがあって、デザイン疎かにしてたので、バナーにしろサイトにしろ、デザインの引き出しが無く、困っています。（ただただ自分が悪い。） せっかくスクールでお題も用意してくれているし、もったいないと思うので、こなしていくことにしました。遅すぎな。 てことで記念すべき第一回！！ まぁフィードバックもらって結構経つけれども。 お題：『イタリアンレストラン』を2パターン作成

        RYOKI

        • コーディング模写01

          また更新が滞っていたので、焦りながら記録。 今回はいつかやったコーディング模写。 参考サイトは Progateの一部。 出来上がったのがこちら↓ 今回は訳あって、完璧に模写じゃなく、ちょっと変えています。 メインビジュアルと背景以外は1000pxで統一させたので、なんか無駄に余白ついてしまった。 ヘッダーとフッターは揃えない方が良かったかも。 だいたい授業で習ったことでできたので、そこまで苦労することもありませんでした。 けど一応復習にもなるし、忘れていた箇所や迷っ

          RYOKI

        第3回オリジナルバナー制作

        RYOKI

        マガジン

        • 記事ストック
          1本
        • オリジナルバナー
          2本
        • バナートレース
          5本
        • 授業復習
          5本
        • 書評
          2本
        • コーディング模写
          0本

        記事

          コーディング　授業復習

          前回作成したハンバーガーメニューはPCの大きさにした時、目には見えないが、header_navの左に存在している。 HTMLで書く順番を変えるとレイアウトが崩れる場合があるので、 ⒈一旦メディアクエリの上でdisplay: none;をしておく。 ⒉レスポンシブでdisplay: none;を上書きするために、レスポンシブ対応のCSSにdisplay: block;をかけておく。 コードの場所が分からない時は、⌘＋Fで探せる。 ＜jQueryを使う時の注意点＞ ・読み込む

          RYOKI

          コーディング　授業復習

          RYOKI

          コーディング授業　復習

          今回は授業を休んでしまったので、授業動画を確認しながら勉強します！ こういう時、授業を録画していただけるので嬉しいです。 復習じゃなく初見になるので、noteにメモしながら動画を見ます。 ・transformプロパティについて 変形させることができる。 ①移動　②回転　③伸縮　④傾斜 上記4つの設定ができる。 移動、回転、伸縮は、XYZ方向の指定が可能。 ・指定できる関数 translate 移動 rotate 回転 scale 伸縮 skew 傾斜 コード例 .

          RYOKI

          コーディング授業　復習

          RYOKI

          Webサイト模写01

          今回はProgateの一部を模写をします。 こちら↓（黒枠は気にしない） ↓模写 ＜難しかった箇所＞ ・六角形の作成 ・その背景（ポリゴンパターン） ・六角形の作成 多角形ツール ↓ 角数を6にする ↓ 歯車のマーク押して ・コーナーを滑らかに ・星形 ・くぼみを滑らかに の3つにチェックを入れる。 辺のくぼみを1％にする。 ↓ 若干辺がくぼんだ六角形ができる。 この作り方は、原型が星形なので少し辺が内側にくぼむようになる。 他に作り方あったら教えてください、、、

          RYOKI

          Webサイト模写01

          RYOKI

          コーディング授業復習　レスポンシブ対応

          レスポンシブ対応の授業復習です。 レスポンシブ対応させるためには、 ①viewportを設定する ②CSSを上書きしていく CSS（スタイルシート）のメディアクエリをmax-width: 750pxのように指定してあげることで、画面のサイズが750pxまではモバイル向けの表示になり、751px以上でPC版の表示に切り替えてくれる。 ・メディアクエリとは デバイスの解像度やウィンドウの幅（画面サイズ）、向きなどの指定条件に合わせて、パソコンとスマホで別々のCSSを適用でき

          RYOKI

          コーディング授業復習　レスポンシブ対応

          RYOKI

          コーディング　復習

          またまた授業の復習です。 まずはこの部分を作っていきます。 HTML<section class="profile sec">　<i class="far fa-user icon"></i>　<h2 class="ttl">Name Name Profile</h2>　<div class="profile_container">　　<figure class="profile_img"><img src="image/sea.jpg" alt=""></figure>

          RYOKI

          コーディング　復習

          RYOKI

          コーディング　授業復習

          今回は勉強記録として、授業内容を記録していきます。 自分流で記録するので、間違えている箇所も多々あるかもしれませんがご了承ください。 ①コンテンツ同士を垂直方向に揃える ⇨align-items: center;を使う <header class="header inner"> <p class="header_logo"><img src="image/logo.png" alt="Portforio" width="140"></p> <nav class="hea

          RYOKI

          コーディング　授業復習

          RYOKI

          Banner Trace05

          さっきの投稿に引き続きトレース5回目です。 見本↓ 秋！って感じのカラーです。もう冬ですが。 左上のテキスト内のマークをどう描こうか迷います。 フォントも特に変わったところは無さそう。 トレース↓ 背景写真の色合いが見本よりも暗くなってしまいました。 チョイスミスったかも。 左上のマークは、＞でいけるかなと思ったけど上手いことできなかったのでペンツールで描きました。 けど、ペンツールだと上手く描けませんでした。 数字の部分は垂直比率を変えたら良かったのか？ 簡単そう

          RYOKI

          Banner Trace05

          RYOKI

          Banner Trace04

          バナートレース4回目です。 今回はよくあるビジネス系のバナーデザインを選びました。 自分でやると簡単そうなもの選んでしまう、、 でもやったので一応noteに記録。 ちなみに今回のも作成したのはかなり前です。 見本がこれ↓ よく見る感じのバナー。 フォントサイズの幅が大きいな。 大きいので70で、小さいのは12ぐらいかな？ トレースしたもの↓ まぁ、特に何もありませんでした。 「詳しくはこちら」の左にある三角マークをどうするか一瞬迷いましたが。 今回は練習と思ってペンツ

          RYOKI

          Banner Trace04

          RYOKI

          バナートレース03

          連投になりますが、トレース3回目です。 連続投稿があとこれ含め後3回続きます（笑） 今回の見本がこれ↓ 今回は黒ベースですが、文字が水色とオレンジですごく目立ちます。 けどまだシンプルなほう。 トレース↓ オレンジが見本よりも薄くなってしまいました。 スポイトで吸い取ってるのに同じにならないことがしばしば。 男性のシルエットがもう少しいい素材あったかも。 もともとグレーだった部分を青に変えただけなんで、色を変えるやり方調べます。 あとは下にもう少し余白残した方が良かっ

          RYOKI

          バナートレース03

          RYOKI

          バナートレース02

          少し時間が空きましたが、トレース2回目です。 以前にしてたのですが、投稿してなかったので今更、、 今回の見本はこちら↓ ぱっと見そんな難しくなさそう。 色も青、黄、白の3色だけでシンプル、フォントも特に変わったものもない気がする。 そして、トレースがこちら↓ 特にできないことなどはなかったですが、若干バランスが見本と違うような、、、 フォントは簡単そうに見えたけど、慣れてないこともあり探すのに時間かかりました。 だいたい1時間ぐらいかかってるのでもっと効率上げて取り組

          RYOKI

          バナートレース02

          RYOKI

          書評02　『すぐやる人』と『やれない人』の習慣/塚本亮

          ・何をやっても長続きしない ・なかなか行動に移せない ・どこかで怠けてしまう こう思っている人って結構多いんじゃないかなと思います。そういう私もその一人です。やらないといけないのは分かっているのに、なかなか行動に移すことができません。 「もっとやる気を出そう」「みんなやっているし」「根性が足りないんだ」 こういう精神論で自分を奮い立たせようとしている人もいるかもしれませんが、これでは、ただ同じことを繰り返していくだけです。時には、精神論が必要な場面ももちろんあります。し

          RYOKI

          書評02　『すぐやる人』と『やれない人』の習慣/塚本亮

          RYOKI

          バナートレース.01

          もうスクール結構出遅れてる感して、焦りながら模写模写。ということで、1回目のバナートレースやってみました！ 何を思ったからいきなりサイズ違うのしてしまう愚かさよ。文字のバランス取れる練習にもなるかなと思い続けてみました。 なんかもう悲しい仕上がりに（笑） まず、文字の色も全然違うし、SAVE UP TOに至っては薄っすぅ〜。。。 縦長のを横長にする場合は相当バランス考えんとあかんということが分かりました。 第1回目やけど、思い切って見本を崩してみたらよかったかな。

          RYOKI

          バナートレース.01

          RYOKI