matsu

2020年〜webデザイナーを目指して勉強を始めました。 日々の勉強を記録していきたい…

matsu

2020年〜webデザイナーを目指して勉強を始めました。 日々の勉強を記録していきたいと思います。

マガジン

  • 参考書籍

最近の記事

パンくずリストについて知る

スマホ用のサイトデザインをしていて、パンくずリストって必要?という疑問が湧き、パンくずリストについて調べてみました。 パンくずリストは現在あるページに行き着くまでの階層を記してある便利なリストで、ページ数が多いサイトでよく使用されているものです。 設置する目的①ユーザーのサイト内回遊率を上げること。(下層ページからサイトに流入したときとか便利) ②SEO対策。クローラーはサイト内リンクをたどっていくため、パンくずリストがあればリンクを辿りやすくなる。 スマホであまりパンく

    • 出社1日目 新しく知ったこと

      本日は出社1日目。WEBデザイナーとしての仕事が始まりました👏 業務の中で新しく知ったことの備忘録_φ(・_・ Photoshop スライス機能で 選択したスライスのみ書き出す方法①スライスを設定 ②ファイル > web用に保存 の画面で保存したいスライスを選択 ③保存画面で スライス:選択したスライス に変更 *補足 デフォルトは書き出し先がimageフォルダになっている。 これを解除する方法は下記の通り。 設定:その他 を選択したら出てくる「出力設定」の画面でファ

      • Bootstrapのグリッドシステムについての備忘録

        今日はBootstrapについて勉強。 グリッドシステムはよく使うとのことなので、備忘録。 1.HTMLのheadにBootstrapのCSSを読み込む。 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/

        • バナーコンペについての備忘録

          クラウドワークスでバナーコンペに参加しました。 今回が3回目の挑戦。コンペ形式は参加者がすごく多く、みなさんすごく上手で、「これには敵わないなー」と思うものもありますが、同時に同じテーマに対して色々な発想のデザインを見れる点が大変勉強になります。 (成果物を載せたいところですが、SNS等掲載禁止の案件が多いので自粛致します、、、) 自分なりにバナーコンペのバナー作成手順が掴めてきたので、備忘録。 1.依頼者の求めるバナーイメージを確認する。クラウドワークスでは、カラフルか

        パンくずリストについて知る

        マガジン

        • 参考書籍
          0本

        記事

          1日1サイトレビュー

          今日は「シェフのおいしいつながり」というイベントサイト。 オフホワイトの背景に黒文字で落ち着いた印象。 背景のオブジェクトたちがカタカタと動くアニメーションとなっています。 各セクションタイトルのフォントが可愛らしい。 (imageで挿入されており、フォントの種類はわからず) 全体的に大人っぽくておしゃれなサイトです。 1ページもののサイトとなっています。

          1日1サイトレビュー

          10.08 今日やったこと

          1.コンペ応募用のバナー制作 旅行関係のバナーを制作。2パターン作りました。 初めての応募で気合が入り、2時間以上かかったけどなんとか完成。 次は1時間を目標に作りたい! 2.ポートフォリオサイト スマホ版デザインカンプの作成 昨日PC版を作り終えたポートフォリオ。スマホ版のデザインカンプが完成したので明日からまたコーディングに入ります。 3.昨日作成した架空バナーのリサイズ昨日作成したフィットネスジムのバナーを2サイズ分リサイズしました。 縦長は初めてやったので難しか

          10.08 今日やったこと

          10.07 今日やったこと

          1.架空バナーの修正 女性専用フィットネスジムというお題で以前製作したバナーを スクールの先生に見ていただき、見やすくなるように修正を加えました。 またフィードバックあり次第修正したいと思います。 2.ポートフォリオサイト PC版コーディングポートフォリオの下層ページコーディングが完了しました! モーダル表示が難しく、以前スクールで教えてもらったプラグイン、MODAALを利用しました。 明日からはSP版を作っていこうと思います。 3.WORDPRESSのインストール今まで

          10.07 今日やったこと

          1日1サイトレビュー

          4.1日1サイトレビュー今月からやると決めた1日1サイトレビュー、本日はオーダメイドウェディングの会社、株式会社CRAZYの企業サイト。 全体的に細い字を使用しており、洗練された雰囲気。 背景はオレンジ→ブルーのグラデーション、文字は基本暗めグレー。 読み込み時のアニメーションがとてもおしゃれ。ドット柄が集まってぼやけた光のようになったかと思ったらい、そのまま背景として光が残ってふわふわと動き、下までスクロールすると光が跳ねたようなアニメーションとなっている。 navメニュ

          1日1サイトレビュー

          9月の振り返りと10月の目標

          9月の目標 振り返り◼️ポートフォリオサイトの完成 →下層1ページとレスポンシブ化のみ残。 ◼️月100時間の勉強時間を確保すること  →週25時間、一日3時間ちょっと。今の仕事を今週で退職するので時間は取れるはず! →たぶん確保できた! ◼️noteの投稿を1週間に1回、できれば3回すること           noteは慣れるまでスローペースでも書き続けたいと思います。→9月の投稿は3回でした💧 8月よりは進歩した!笑 10月の目標 ◼️ポートフォリオサイトの完成(

          9月の振り返りと10月の目標

          jQuery がうまく効かなかった理由

          架空サイト作成で、jQuery を使ってページ内リンクをgNavから各セクションへ自動スクロールさせたかったのですが、うまくいきませんでした、、、 自分で確認したこと ①jQueryの構文が間違っていないか ②HTMLの記述が間違っていないか ③idに誤りはないか →自分で解決できず、、、 通っていたスクールのチャットで質問をなげてみると!、、一瞬で回答をいただきました🙇‍♀️ ”jQuery3系だとa[href^=#]の所をa[href^="#"]とすれば動くと思います

          jQuery がうまく効かなかった理由

          metaタグとは

          htmlを学び始めて、metaって何の意味があるん?と思い、調べてみました。 meta titleヒットさせたいワードを入れる。 検索結果で表示されるサイトのタイトルとなる部分。サイト上ではブラウザのタイトルバーに表示されるのであまり目立たないが、検索順位SEOに効果あり。 meta description検索したときにタイトル下に表示されるサイトの説明文(スニペット)。検索順位には影響しない。ただ、魅力的な説明文であればクリック率がアップする。(ただし、検索エンジンに

          metaタグとは

          8月の振り返りと9月の目標

          8月の目標振り返り◼️ポートフォリオサイトを進める。(リンク埋め込み・レスポンシブ化)  →レスポンシブ化まで至らず、、 ◼️勉強時間を毎日30分は確保する。  →途中1週間程勉強ができなかった ◼️noteの投稿を1週間に3回はすること(勉強してて気付いたことを書く)  →全然出来んかった、、 8月にたてた目標はほぼ達成できず、、 今月は色々と想定外のことが起き、時間が取れませんでした。 過ぎてしまったことは仕方ないので、9月から仕切り直し! 9月の目標*絶対やりた

          8月の振り返りと9月の目標

          8月の目標

          ・ポートフォリオサイトを進める。(リンク埋め込み・レスポンシブ化) ・勉強時間を毎日30分は確保する。 ・noteの投稿を1週間に3回はすること(勉強してて気付いたことを書く)

          8月の目標

          自己紹介

          今日からノート始めました。まずは自己紹介です。 Profile1993年生まれ、兵庫県生まれ、兵庫県育ち。 学生時代の部活:ソフトボール部 職業:会社員(1社目:香水・化粧品商社の営業 /2社目:機械メーカーの営業) 目標webデザイナーになること 2020年からwebデザイン・コーディングの勉強を始めました。 インプット大全という本を読んで、アウトプット前提でインプットすることで学習効率が高まるということを知り、noteを活用することに決めました。 世の中はコ

          自己紹介