okuno

WEB制作・ディレクション・広告　勉強

okuno

WEB制作・ディレクション・広告　勉強

WEBサイトの企画【分析】

WEBサイトの企画でまずはじめに取り組むことより良いWEBサイトを制作するために、まず現状を確認・検討し方向性を決めていく必要があります。 この中で必要な作業は下記の通りです。 目標・目的の確認 現状の分析 現状の分析では、自社サイトはもちろんのこと、 他社サイトの分析も必要です。 自社サイトの分析 WEBの一般的な傾向（目的と打ち出しているワードが合っていない。ボタンがわかりにくい。など） 分析者の主観 他社サイトの分析 似た目標や目的を持ったサイトの良い点

okuno

    • JSライブラリで「ページ内スクロール」「スクロールアニメーション」

      ページ内スクロール「smooth.scroll.js」 ページ内スクロールには「smooth.scroll.js」を使用します。 1.公式サイトから、データをダウンロードする。 2.実装したいデータのJSフォルダに、 　dist内の「smooth-scroll.polyfills.min.js」を移動させる。 3.実装したいデータのHTMLに読み込ませる。 <script src="js/smooth-scroll.polyfills.min.js"></script>

      okuno

      • JSライブラリで「スライダー」

        スライダーのライブラリで代表的なものは「Swipper」と「slick」である。 今回は「Swipper」を使います。 「Swipper」の事前準備1.Swipperのダウンロードページから、ZIPファイルをダウンロードする。 2.実装したいデータの(a)CSSフォルダに「swiper.css」を移動、(b)jsフォルダを作成しその中に「swiper.min.js」を移動させる。 3.実装したいデータのHMTLに読み込ませる。 (a),head内の、style.cssの上

        okuno

        • jQueryとは？【jQuery勉強まとめ②】

          jQueryのイベントメソッド例「ボタンをクリックすると、ボックスの色が変わる」 　この指示の中で、イベントメソッドに当たるのは、 「ボタンをクリックすると」の部分である。 記述例 HTML <button>fadeOut</button> <div class="box">box</div> CSS.box { background-color: #a11; width: 300px; height: 300px;} jquery <s

          okuno

        WEBサイトの企画【分析】

        okuno

        • JSライブラリで「ページ内スクロール」「スクロールアニメーション」

          okuno

        • JSライブラリで「スライダー」

          okuno

        • jQueryとは？【jQuery勉強まとめ②】

          okuno

          jQueryとは？【jQuery勉強まとめ①】

          jQueryとは？JavaScriptのライブラリ、CSSっぽく記述することができるので、 初めに勉強しやすい。 デメリットはファイルが重たい。 jQueryを使うための2つの方法1.公式HPからファイルをダウンロードし、自分の環境内でファイルを読み込ます方法。 2.コードを記述することで、外部からファイリを読み込む方法（CDN化） 〔解説〕1.公式HPからファイルをダウンロードし、自分の環境内でファイルを読み込ます方法。 ①公式HPから圧縮された最新バージョンのファイル

          okuno

          jQueryとは？【jQuery勉強まとめ①】

          okuno

          Sass勉強まとめ②

          特徴③継承（mixin）で楽に書けるmixinは、プロパティや値をセットにしてまとめることができる。 以下、mixinで記述 SCSS CSS SCSSで「@mixin」と、mixinを使用する宣言をし、次に任意の名前を記述する（今回は「content-width」）。 波括弧以降にプロパティとその値を複数指定できる。 クラス名「header」にmixinで指定したプロパティと値を呼び出す場合、 「＠include　任意の名前（今回はcontent-width）;

          okuno

          Sass勉強まとめ②

          okuno

          Sass勉強まとめ①

          Sassとは？CSSを拡張して、書きやすく見やすくしたスタイルシートのこと。 【特徴】 ①変数を使用できる ②アンパサンドを使用し、入れ子で記述ができる ③継承（mixin）で楽に書ける ④ファイルを分割できる Sassの書き方「sass記法とscss記法」sass記法は、セミコロンや波括弧を使用しないため、コードが簡略化され、記述の負担が少ない。ファイル拡張子は「.sass」 scss記法は、書き方がcssと似ていて、ネストと呼ばれる入れ子の構造で記述する。ファイル拡張子

          okuno

          Sass勉強まとめ①

          okuno

          趣味で撮った写真を使用してwebサイトを作りました！〈デザイン振り返り編〉

          先日受講を終えたwebデザインスクールの個人制作課題が、 一通り完成したので振り返りをします。今回はデザインについて。 私が制作したのは、ウラジオストクという都市を紹介するwebサイトです。 まず、このwebサイトを制作しようと思いついたきっかけについてお話しします。きっかけは２つです。 学生時代に行った旅先で撮影した写真がたくさんありましたが、撮影したきりSNSにすらほとんど投稿していませんでした。これを機に、撮影した写真を使って、お気に入りの旅先を紹介するwebサイ

          okuno

          趣味で撮った写真を使用してwebサイトを作りました！〈デザイン振り返り編〉

          okuno

          写真がメインのサイトレビュー

          趣味のオリジナルサイトを制作中ですが、写真をメインとするwebサイトのため構成が難しく、参考サイトを調べました。 1.「EN ROUTE｜世界自然遺産｜奄美・琉球」 ・画面全体に写真を表示させ、インパクトが強い。 ・ファーストビューは暗めの動画で白文字を際立たせている。 ・できるだけ写真を大きく使用し文字を重ねている。 ・#1〜#4の文章は同じclassでまとまっている。 ・全写真トーン？が揃っている。暗め。 2.「平戸城　懐柔櫓　Castle Stay」 ・和風のイラス

          okuno

          写真がメインのサイトレビュー

          okuno

          サイトレビュー　05

          【レビューサイト】 　https://www.human.or.jp/ 【タイトル】 　Human Stage 人材派遣サービス総合サイト 【概要】 　人材の募集・仕事内容や採用情報の掲載 【ターゲット】 　仕事を探している人 　社員を募集している会社の人(人事部や採用担当など) 【目的】 　仕事を探している人と、働き手を募集している企業をつなげるため 【構成】 　お仕事検索　選ばれる理由　お仕事紹介までの流れ　企業のご担当者様　採用情報　スタッフ登録　 【カラー

          okuno

          サイトレビュー　05

          okuno

          Webデザインの勉強を始めて１ヶ月

          こんばんは🌙 スクールに申し込みをし勉強を始めて、約１ヶ月が経ちました。 今までとは劇的に生活習慣が変わり毎日が楽しいです。 この１ヶ月で取り組んだことと考えたこと記録します。 ◆１ヶ月で取り組んだこと 　・スクール会員サイトtorikumu　 　　CFスタートステージ/デザイン基礎ステージ(全回)・初級ステージ(14回まで)・コーディング基礎(12回まで) 　・バナーレビュー　×1 　・サイトレビュー　×4 　・転職サイト WANTEDLY　会員登録 　・Twitte

          okuno

          Webデザインの勉強を始めて１ヶ月

          okuno

          サイトレビュー　04

          【レビューサイト】 　https://tensui.or.jp/ 【タイトル】 　社会福祉法人　天水福祉事業会 【概要】 　児童福祉・障害福祉・高齢福祉に関する活動やサービスの紹介 【ターゲット】 　保育園や児童クラブを探している人 　障害者の方で仕事を探している人、相談したい人 　介護を必要としている人 【目的】 　各活動やサービスを紹介し、困っている人を助ける。 　地域と福祉をつなげ、活性化につなげる。 【構成】 　私たちについて(ご挨拶・理念・法人概要・組織図

          okuno

          サイトレビュー　04

          okuno

          サイトレビュー　03

          3回目のサイトレビューです。 note4回目の投稿にして、改行の方法を知りました… というか、段落変更のことを改行と勘違いしていました。 これから、もっと見やすくなるはずです！ 【レビューサイト】 　https://travel.app/ 【タイトル】 　エアトリ Now 【概要】 　エアトリ Now　アプリのLP 【ターゲット】 　旅行に興味のある人 【目的】 　エアトリ Now　アプリのダウンロード促進 【構成】 　Download on the AppSto

          okuno

          サイトレビュー　03

          okuno

          サイトレビュー　02

          【レビューサイト】 https://mr-cheesecake.com/ 【タイトル】Mr.CHEESECAKE ミスターチーズケーキ 【概要】チーズケーキの販売サイト 【ターゲット】食にこだわりがある人、 　　　　　　　チーズケーキが大好物の人、流行りのものが好きな人 【目的】チーズケーキの販売・こだわりを伝える 【構成】トップ / ログイン / about ブランドについて / 購入欄 / topic /

          okuno

          サイトレビュー　02

          okuno

          バナーレビュー　01

          初めてのバナーレビューです🌱 〔概要〕 　ウォーターサーバーの初月無料キャンペーン　バナー広告 〔目的〕 　ウォーターサーバーの売り込み 〔ターゲット〕 　ウォーターサーバーを利用したことのない人 　利用しようか迷っている人 〔カラー〕 　　ベースカラー　薄い水色・濃い水色 　　メインカラー　白 　　アクセントカラー　黄・青 〔フォント〕 　　ゴシック体 〔感じたこと〕 　　・「０円」「全員に！」「5000円」の文字が特に目立つ 　　　（アクセ

          okuno

          バナーレビュー　01

          okuno

          サイトレビュー　01

          初めてのサイトレビューです！ レビューサイト　https://fukushima-ko.com/ 〔タイトル〕 　　福島工務店　FUKUSHIMA ARCHITECT 〔概要〕 　　戸建て住宅の設計〜施工を行う企業のwebサイト 〔ターゲット〕 　　家を建てようと考えている家族 　　こだわりの建築物を建てたい人 〔目的〕 　　見学会・相談会に来てもらう 　　問い合わせ・資料請求をもらう 〔構成〕 　　ホーム / こだわり / ガイド-家ができるまで-

          okuno

          サイトレビュー　01

          okuno