ren_k0227

ren_k0227

デジタルマーケティングの基礎

①インターネット上でのビジネス機会1.デジタルワークショップについて デジタル マーケティングの基礎や活用方法を、数分の動画でわかりやすく 学ぶことができる。 コンテンツ マーケティング、オンライン広告、モバイル マーケティング、オンライン販売など、スキルや知識の向上に役立つ、さまざまなレッスンが用意されている。 2.インターネットのメリット インターネット最大の利点は、見込み客が、インターネットであなたの会社やお店を検索できるようになること。 検索者はあなたのお店

ren_k0227

    • はじめてのデザイン[4]タイポグラフィ

      1.タイポグラフィについて①タイポグラフィとは 元々は印刷物における文字の体裁（書体/大きさ/行間/配列など）を整える 活版印刷術のことを「タイポグラフィ」と呼んでいたが、現在はその定義が 印刷物のみに限らず、文字に関するもの全般に広がっている。 大きく分けると2通りの意味で使われることが多い。 ・文字を読みやすく、美しく並べること。 ・文字をデザインして扱うこと。 特に「文字を読みやすく、美しく並べること」に関しては、 デザイン業務以外のビジネス書類作成やプレゼン資料

      ren_k0227

      • はじめてのデザイン[3]色と配色の基本

        1.カラーホイール①カラーホイールとは カラーホイール（The Color Wheel）は、「赤」「黄」「青」を基準とした 12色をサークル上に配置したもの。 相性のいい色の組み合わせや、反対に相性の悪い組み合わせなど、 色の組み合わせにどんな効果があるのか判断する手助けをする。 ②カラーホイールの12色 三原色：「赤」「黄」「青」 等和色：「緑」「紫」「オレンジ」 第三色：「赤オレンジ」「黄オレンジ」「黄緑」「青緑」「青紫」「赤紫」 ③カラーホイールの使用方法 カ

        ren_k0227

        • 君と会えたから・・・・・・

          1.筆者の主張今日を生きているという素晴らしさに感謝し、 今日一日を精一杯生きることの大切さを考える。 2.理由・根拠①円＝ありがとう 私たちは「ありがとう」という代わりに、それに見合ったお金を払っている 生産者の人に「ありがとう」という声を届けることはできないが、その人は 私たちから「円」を受け取ることになる。 世の中のお金の動きはすべてこれに当てはまる。 欲しいものを手に入れるためにお金を払っているのではない。 それに携わった人に「ありがとう」を届けているのだ。

          ren_k0227

        デジタルマーケティングの基礎

        ren_k0227

        マガジン

        • chot.design
          4本
        • 本のアウトプット
          2本
        • デイトラWeb制作
          49本

        記事

          はじめてのデザイン[2]デザインの４つの基本原則

          1.デザインの4つの基本原則を意識する①デザインの４つの基本原則とは すべての良いデザインに含まれる４つの原則 ・コントラスト ・近接 ・反復 ・整列 私たちが日常生活の中で触れるデザインには必ず備わっている この基本原則は意識することですぐに実践できる ②デザインの４つの基本原則を知る コントラスト 要素に区別を付けること。 ページ/画面上の要素にメリハリがつき、視覚的に面白さを作り出す。 近接 関連する項目を物理的にまとめてグループ化すること。 近づけることで、

          ren_k0227

          はじめてのデザイン[2]デザインの４つの基本原則

          ren_k0227

          はじめてのデザイン[1]デザインを考える前に

          1.デザインの役割と重要性について①はじめに デザインという言葉は、日々の暮らしの中で耳にする機会も多い 「デザイン」という言葉の意味や、「アート」との違い、そして ビジネスにおけるデザインの重要性について理解する。 ②デザインとは ラテン語の`designare`が由来だと言われている。 意味「計画を記号に表す」「線を引く、描く」 アイデアを何らかの形として表現するとも言える デザインとは、ヒトのために思考し、最適な形として表現すること。 つまり、誰かの課題を解決

          ren_k0227

          はじめてのデザイン[1]デザインを考える前に

          ren_k0227

          自己肯定感を上げるOUTPUT読書術

          1.筆者の主張読むべき本を読み、効果的なINPUTとOUTPUTを繰り返して 自分の血肉としろ。 2.理由・根拠①本は「ローリスク・ハイリターンな投資」である １冊数百円～数千円で買える（ローリスク）のに、他人が何年も 時間とお金をかけ、苦労して得た知識・見解をそのまま自分に 取り込める（ハイリターン）から。 インターネットやSNSは情報を素早く取得できるが、その情報が 正しいか判断できる知識が必要になる。本なら 厳しい編集チェックを受けているため信憑性が高い。 つま

          ren_k0227

          自己肯定感を上げるOUTPUT読書術

          ren_k0227

          DAY49.実務でよく使うアニメーションの付け方編 アコーディオン

          01.slideToggle()で簡単アコーディオン実装jQuery('.accordion__head').click(function() { 　jQuery(this).next().slideToggle(); 　jQuery(this).children('.accordion__icon').toggleClass( 'is-open' ); }); jQuery(this)に対する、next()やchildren()といった 相対的な位置関係もよく使う .

          ren_k0227

          DAY49.実務でよく使うアニメーションの付け方編 アコーディオン

          ren_k0227

          DAY48.実務でよく使うアニメーションの付け方編 クリックイベントの処理

          01.ページ内リンクでクリックした要素に下線を引くメニューやタブをクリックしたとき、 クリックしたメニューの色が変わったり太字になったりする ユーザーにとって、どれが選択されているのかを見分けるための大事な表現 ①クリックされた時にメニューの全てのリンクの下線を削除する ②クリックされた要素に対して下線を引く addClass、removeClassを活用 02.クリック時にクラスをつけ外しアクションイベントの多くは 「◯◯したら□□のクラスをつける」 「◯◯したら□

          ren_k0227

          DAY48.実務でよく使うアニメーションの付け方編 クリックイベントの処理

          ren_k0227

          DAY47.実務でよく使うアニメーションの付け方編 スムーススクロールとフローティングアイテム

          01.スムーススクロール内部リンクをクリックした時に「ぐいーん」と移動した方が ページ内を移動していることが理解できて少し親切 スムーススクロールが鉄板で使われるパーツといえば、 「トップへ戻るボタン」 1.ページ内リンクのクリックを検知する スムーススクロールは ページ内リンクをアニメーションをつけて移動させること ページ内リンクの発動キーはhrefが「#」から始まるリンクとなる // #から始まるURLがクリックされた時 jQuery('a[href^="#"]

          ren_k0227

          DAY47.実務でよく使うアニメーションの付け方編 スムーススクロールとフローティングアイテム

          ren_k0227

          DAY46.実務でよく使うアニメーションの付け方編 スマホ時のドロワーメニュー

          01.ドロワーが作れるライブラリ1.drawer.js 対応ブラウザ ・IE10~ ・Safari ・Chrome ・Firefox 2.hiraku.js 日本人が開発している ドキュメントも全部日本語 02.ドロワーメニューを開いた時のレイヤー階層ドロワーが開いた時の重なりを意識してz-indexを指定する 下から順 ①通常のbody内のコンテンツ ②ヘッダー（※上部に固定表示するため） ③ドロワー開いた時の黒背景 ④ドロワーメニュー ⑤ハンバーガーメニュー（

          ren_k0227

          DAY46.実務でよく使うアニメーションの付け方編 スマホ時のドロワーメニュー

          ren_k0227

          DAY45.実務でよく使うアニメーションの付け方編 スクロールで「フワッ」と登場

          01.WOW.jsで「フワッと」表示するフワッとした動きを実装するなら「WOW」ライブラリを使うのが一番楽 ※WOW.jsには商用利用も無料の「MIT版」商用利用は有料の「本家」 の２種類があります！ 無料のMIT版を使わないとお金がかかる animate.css クラス名をつけるだけでアニメーションがつけられるcssパッケージ wow.js アニメーションのトリガーや詳細を操作できるJavaScriptパッケージ wow.min.jsを読み込むだけじゃなく 「new

          ren_k0227

          DAY45.実務でよく使うアニメーションの付け方編 スクロールで「フワッ」と登場

          ren_k0227

          DAY44.実務でよく使うアニメーションの付け方編 スライダー（カルーセル）

          01.スライダーの実装ライブラリの使い方を覚えてそのライブラリをカスタマイズ出来る デザインカンプ上にアローボタンやページネーションが 用意されていたら「スライダーで実装する」と判断する ※デザイナーさんに意図を聞く 2枚目以降の画像がない場合、適当に同じようなサイズの仮の画像を入れる 先方が画像を差し替えたらいいだけの状態にして納品 02.扱いやすいスライダー系ライブラリを１つ持つスライダーは自作してもいいが、先人の凄い人が作ってくれた JavaScriptのライブ

          ren_k0227

          DAY44.実務でよく使うアニメーションの付け方編 スライダー（カルーセル）

          ren_k0227

          DAY43.実務でよく使うアニメーションの付け方編 品質を担保するテスト

          01.チェック項目の一覧とチェック方法コーディングの品質を担保するために、 最低限チェックしておいた方がいい項目がいくつかある ・誤字脱字がないか　テキスト比較ツールで比較 ・改行位置は適切か　タブレットやスマホ時の<br> ・フォントは適切か　WhatFontで確認 ・色が適切か　デベロッパーツールでcolorをデザインカンプと比較 ・スムーズにレスポンシブ化されるか　目視確認 ・スマホ(320px)tab(768px)PC(カンプ)表示に崩れはないか　目視確認 ・水平ス

          ren_k0227

          DAY43.実務でよく使うアニメーションの付け方編 品質を担保するテスト

          ren_k0227

          DAY42.実務でよく使うアニメーションの付け方編 Webフォント/デバイスフォント

          01.CSSのフォントの指定を理解する1.font-familyに複数のフォントを書く理由 セレクタ {font-family: フォント名;} OSによって入っているフォントが異なるから 複数のフォントを書いて対応 MacでもiPhoneでもiOSでも使えるフォントを複数個並べてカバーする 間に半角スペースの入るフォント名は「’」ではさむ 2.記載する順番 前に書かれたフォントが優先される 英語フォントは前に並べる 3.最後に登場する「sans-serif

          ren_k0227

          DAY42.実務でよく使うアニメーションの付け方編 Webフォント/デバイスフォント

          ren_k0227

          DAY41.実務でよく使うアニメーションの付け方編 マウスホバー時の動きを付ける

          01.マウスホバーのパターン１０選hover { 　display: inline-block; 　padding: 0.6em 2em; 　margin: 0 0 1em; 　background-color: #4CAF50; 　color: #fff; 　cursor: pointer; 　transition: all 0.3s ease 0s; } 1.透明に近づける .hover:hover { 　opacity: 0.6; } 2.色が反転 .hover

          ren_k0227

          DAY41.実務でよく使うアニメーションの付け方編 マウスホバー時の動きを付ける

          ren_k0227