グーグル広告の基礎
広告指標用語 CPM (Cost Per Mille) 広告表示に対する広告費用単価。1000回表示（mille）あたりの費用で表す。「広告費用 ÷ インプレ…
GA4の基本
GA4の基本と初期設定を確認しよう Googleアナリティクスとは、Googleが提供する無料で利用できるアクセス解析ツールで、サイトに設置することで訪問した…
LP制作の基礎
なぜLPを制作するのか？ LPの目的は、ユーザーに特定の商品を購入してもらうためのネクストアクション（行動）を促すことです。購入や会員登録など、そのLPが促す…
SEOの基礎知識
昨今のWeb制作の現場ではSEOに関する知見はなくてはならないように感じています。 今回はSEOに関する基礎的な知識をまとめていきます。 SEOとは 「検索エ…
CIを軸とした企業ブランディングの基本的な流れ
創業から間もない企業様のWebデザインを行っていると、企業ステートメントや各種ツールがなく、結果として企業ブランディングから行うことがあります。 ブランディン…
HCD(人間中心設計)入門 | UXとの違い
デジタルの世界において年々ユーザビリティやユーザーエクスペリアンスが大切になってきているように感じます。またこれらの質を上げるためにデザイン思考や今回紹介する…
to Cブランディング好きなwebディレクターがチェックしたい事業会社まとめ | 随時追加
I-ne https://i-ne.co.jp/ シャンプーで有名なボタニストやサローニアを展開されている。 コカコーラとの出資で合同会社Endian（エンデ…
インプットでよく見るサイトまとめ | 随時追加
インプットで定期的に見るサイトをリストアップしました。 順々追加していきたいと思います。 デザイン ■Baubauhaus http://www.baubau…
SNSで贈れるソーシャルギフト dōzo ドーゾ | 気になるサービス
癖強めなwebサービスdōzo ドーゾが気になります。 https://dozo-gift.com/ 要は選べるカタログギフトなんですがデザインとSNSを絡め…
アニメーションを導入するときに注意すべきこと | 考察
WebサイトにおけるアニメーションとUXについて調べていくとUX MILKの記事に辿り着きました。 翻訳元の記事はJolina Landichoというデジタル…
Illustrator | 文字を分割してタイポグラフィーを作る
現在IllustratorやPhotoshopの練習しています。 その中で気になるyoutubeチュートリアルでも練習しています。 今回はこちらのチュートリア…
ブロックチェーン 、Web3.0、NFT、メタバース。分かりやすい入門記事まとめ
TLに聞き慣れない言葉が並ぶようになり、そろそろついていけなくなるかも、、と思いタイトルにあるワードを調べました。今回はその中でも短時間で分かりやすい記事があ…
脳の仕組みとユーザー体験
本書は脳内で起こるUX(体験)の構成要素を、認知科学の観点から紐解いた後、より良いUXを追求していく実践書です。要点を絞って書き残していきます。 ■背景 UX…
W3C validator 対策の備忘録
■W3C validator とは W3CはWebの標準や規格を定めており、HTMLやCSSの規格も定めている団体です。 全てのWebサイトがこの規格を標準に…
GitHubからNetlifyにホスティングする
GithubからデプロイしてNetlifyにホスティングことがあったので備忘録として書き残していきます。 ■前提 ・Gatsbyプロジェクトのビルドが正常に完…
Illustrator | グリッドに沿った簡単なロゴデザインの手法 | 三角形
現在IllustratorやPhotoshopの練習しています。 その中で気になるyoutubeチュートリアルでも練習しています。 今回はこちらのチュートリア…
adobe | photoshopの備忘録 ※随時追加
■選択範囲 __選択解除 ⌘ d __自動選択 ・全レイヤーを選択が対象の場合は対象をONにする ・似た色の近くに隔たりがある場合は隣接のチェックをONにする…
Illustrator | Photoshop | 抽象的なロゴとモックアップの作り方
現在IllustratorやPhotoshopの練習しています。 その中で気になるyoutubeチュートリアルでも練習しています。 今回はモノラインロゴのチュ…
Shopifyのテンプレート言語 | Liquidの基礎 ※随時追加
shopifyのお仕事依頼を頂きLiquidの構文について勉強しているので、備忘録として書き残していきます。 ■Liquidとは Liquidとは、Rubyで…
アニメーションの歴史
Web制作をしている中で、動きやアニメーションを考える機会は多いと思います。 アニメーションとは何のかを調べていくと、紀元前3000年から現在までのアニメーシ…
adobe | Illustratorの備忘録 ※随時追加
adobeのソフト、Illustratorの基礎的な知識が多々ぬけており、基礎的な事を勉強しています。 備忘録として書き残していきます。 アンカーポイント ア…
Shopify theme pull | An unexpected error occured. の対処法
Shopify theme pull を実行した時に下記のエラーが起こりました。 ✗ An unexpected error occured. To subm…
shopify ローカルでコードを編集する方法
shopifyのテーマファイルをローカルで編集する方法を学んだので書き残していきます。 ■ ディレクトリを作り、vscodeで開く まず空のディレクトリを作り…
2022年版 | MW WP FormにGoogle reCAPTCHA V3を導入する
Webデザイナーの森です。 WordPressで使用することの多いMW WP Formですが、運用してみるとなかなかスパムメールが多いです。 そんな中Goog…
webディレクターの仕事とは 【経験談】
今回はweb制作会社のディレクターとはどんな仕事をしているのか、ベンチャー企業での経験を元に書いていきます! webディレクターとは 一言で言うとwebサイト…
Firebase | deploy時に経験したエラーを書いていく
Firebaseへのdeploy時にいくつかエラーを経験し困ったので書き残していきます。 Error: functions predeploy error: …
事例で学ぶブランディング
本書は数々の世界企業のブランディングを行なっているLANDOR(ランドー)のブランディング、デザイン戦略が惜しみなく分かりやすく掲載されています。 webデザ…
LibSassからDart Sassへ移行
Sassで使っていた@importが、遅くとも2021年10月1日には廃止されるそうです。 https://sass-lang.com/blog/the-mo…
webpack | Babelを使ってES6をトランスパイルする
まずはloaderを入れるために下記のコマンドを実行します。 npm install --save-dev babel-loader@8.0.6 続いて下記を…
webpack | webpack-dev-serverのインストール
webpackでローカルサーバーを使っていきます。 web pack-dev-serverを使っていきます。 npm install —save-dev we…
初めてのwebpack
以前からwebpackについて気になっていたのですが、Udemyで良さそうな講座を見つけたので この機会に勉強を始めました。 今回は備忘録として書き残していき…
GitHubへの接続でPermission Errorが出た際のシンプルな対処法
これまでGitHubへ何事もなくプッシュできていたのですが、急にプッシュできなくなったので 備忘録として書いていきます。 ググるとsshキーのリセットなどの記…
WPサイトのSEO対策はSIMPLE PACK SEO
以前まで All in One SEO Packを使っていましたがSIMPLE PACK SEOへ変更しました。 今回はその理由とSIMPLE PACK SE…
Search Console | 効率的な導入とインデックスリクエストの流れ
■Search Consoleとは 一言で言うとgoogleのwebサイトの分析ツールです。 分析ツールですが、サイト制作では納品前のクロールリクエストでも使…
Schemaを使ってWordPressサイトを構造化データにする方法
■構造化データとは？ 構造化データとは簡単に言うと、検索エンジンがページの内容をより理解しやすくなる記述の事です。 データを構造化してあげる事で検索エンジンに…
Git Hubでプロジェクトを管理する一連の流れ
Git Hubでプロジェクトを管理する一連の流れを書いていきます。 SourceTreeを使っており、GitHubにはsshで接続しています。 ■ブランチを切…
パララックス効果を簡単に実装するならSimpleParallax
パララックス効果取り入れたい時に使った、SimpleParallaxが便利だったのでご紹介します。 スマホでも機能します！ ■読み込み 公式からcdnを読み込…
Illustrator | モノラインロゴのチュートリアル
現在IllustratorやPhotoshopの練習しています。 その中で気になるyoutubeチュートリアルでも練習しています。 今回はモノラインロゴのチュ…
作字デザインのチュートリアル
現在IllustratorやPhotoshopの練習しています。 その中で気になるyoutubeチュートリアルでも練習しています。 今回は作字デザインのチュー…
shopify prestige | 配送時間指定.ampを追加する方法
shopify prestigeに配送時間指定.ampを追加する方法が公式になかったので書いていきます。 やる事は4つです。 アプリのインストール 配送時間指…
Lesson 03 | ジャケットデザインを作る
現在デザインの作り方、アイデア図鑑という本でデザインの勉強をしています。 ここでは勉強になったポイントや所感を書き残していきたいと思います。 ■今回のデザイン…
webデザイナーのタスク一覧
制作会社に勤務しながらたまに知り合いからWebサイトの依頼を受けています。 基本的に自身でディレクションしながら案件を進めているため初回の打ち合わせから納品ま…
Lesson 02 | 複数のイラストを上手に使う紙面構成
現在デザインの作り方、アイデア図鑑という本でデザインの勉強をしています。 ここでは勉強になったポイントや所感を書き残していきたいと思います。 ■今回のデザイン…
Lesson 01 | イラストをメインにして力強く見せる
現在デザインの作り方、アイデア図鑑という本でデザインの勉強をしています。 ここでは勉強になったポイントや所感を書き残していきたいと思います。 ■今回のデザイン…
scss | z-indexを効率的に管理する
レイアウトによってはz-indexが分かりづらくなったりすることがありますが、scssでは配列を見れば一目で順番が分かります。 ■使い方 まずは配列を用意しま…
scss | if文で条件分岐
scssでもif文が使える。 条件は変数にくる引数で判定する。 @if 変数 ==引数 { }else if { } See the Pen scssのif文…
デイトラShopifyコースを修了しました
ECサイトのご相談を頂く事が増えてきた事から、デイトラのShopfyコースを受講しました。 無事コースを修了したので、感想とアウトプットを書いていきます。 h…
GSAPの読み込み | TweenMax、TimelineMax
■GSAPとは？ TweenMax、TimelineMaxなどの総称を指す。 ■GSAPの読み込み 下記にアクセスし、Loading GSAPのスクリプトを読…
ディレイ | transition-delay
■transition-duration transition-durationはアニメーションの変化の時間 ■transition-delay transi…
イージング | animation-timing-functionの種類
■ease アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。 ■linear 等しい速度でアニメーションする。 ■ease-in プロパテ…
覚えたjsのメソッド、プロパティを追加していく
■clientHeight 表示域の高さを取得する。 ある要素の半分で発火させたい時はclientHeight * .5; とする。 ■getBounding…
リビングシフト | 面白法人カヤックが考える未来
本書はweb界隈の方なら一度は耳にした事がある面白法人カヤックCEOの柳澤さんが書かれています。 カヤックといえば鎌倉に支社を置いていて、旅する支社という制度…
未経験からのWeb制作ベンチャーはどれくらい大変なのか【経験談】
Webデザイナーの森です。 異業種からWeb制作を中心としたベンチャー企業に転職しました。 今回はWeb制作のベンチャーでどんな風に働いていたのかを書いていき…
shopify prestigeでTwitterカードを大きくする方法
下記のコードthema .liquidの124行目に追加すればOKです。 お試しください。 <meta name="twitter:c…
PHP工房ならプラグイン無しでお問い合わせフォームを簡単に作れる
ワードプレス案件のお仕事がメインですが、たまにCMSなしの案件があります。 そんな時に困るのがお問い合わせフォームです。 プラグインなしで作るのは難易度高いな…
ブランディングが9割
ブランディングに関する本をいくつか読んだ事がありますが、本書はブランディングを体系的に学ぶ事ができる点から、実務にも落とし込みやすく、入門書としてかなりお勧め…
P5.js | 覚えるべき数式 ※随時追加
P5.jsには多くの数式が登場します。 随時追加していきます。 ■座標 座標は左上が(0, 0)です。 これは簡単ですね。 ■おはじきの法則 おはじきの法則で…
shopify | 注文備考欄を追加する方法
shopifyはデフォルトで注文備考欄がありません。 ラッピングの希望を伝えたい案件では必須ですね。 注文備考欄をアクティブにする方法を紹介していきます。 注…
図解 | Shopify ペイメントの振り込み日について
Shopifyペイメントは毎週金曜日振り込みです。 支払い期間は、公式によると5日間と金曜日までの残り日数を加えた日数とされています。 これが少し分かりにくい…
P5.js | マイナスの計算
■マイナスの計算 基本的な数学の話になりますが -1 × -1 = 1 となります。 下記ではまずellipseのエックス座標にlocationXが入り、 l…
知覚力を磨く -絵画を観察するように世界を見る技法-
最近読み終えた「知覚力を磨く」のアウトプットです。 デザイナーやエンジニアのみならず、クリエイティブなことに関わってる方へ強く勧めできる内容です。 知覚を通じ…
P5.js | 変数、if文、カラー
■位置を変数で置き換える 下記のコードはX座標を変数locationXに格納し、ellipse()のエックス座標に使用しています。 またlocationX +…
shopify | 返金対応の備忘録
https://help.shopify.com/ja/manual/payments/shopify-payments/faq https://help.s…
P5.js | 入門
P5.jsの基本的な事を書いていきます。 使い方 下記からCDNを読み込むことで簡単に利用できます。 <script src="htt…
React | アウトプット
Reactを学んだので一度アウトプットをしたいと思います。 ■作った物 ・TODOリスト https://react-firebase-hosting-2eb…
shopify debut | Powered by Shopifyを消す方法
shopifyのテーマdebutでフッターのPowered by Shopifyを消す方法を書いてきます。 ・sections/footer.liquidを開…
P5.jsの勉強をライトに始めました
P5.js Processingというアートやデザイン向けに開発された言語を、JavaScriptのライブラリとして使えるようにしたのがP5.jsのようです。…
React | connected react routerでのエラー
connected react routerでpushを使った際に下記のエラーが出ました。 Uncaught Could not find router re…
WordPressでログインURLを変更する方法 | Login rebuilder
WordPressサイトはオープンソースであるため、ドメイン/wp-adminで簡単にログイン画面にたどり着いてしまいます。 セキュリティ対策としてLogin…
React | create-react-appができないパターン
create-react-appができない事例があったので書き残します。 実行すると下記のように出ました。 You are running `create-r…
React | 学習中のエラーまとめ
Reactの学習中で現在Reduxの学習しています。 体験したエラーを随時更新していきます。 今のところほとんど凡ミスです。 ■Module not foun…
JavaScript | 三項演算子
三項演算子はシンプルに条件分岐を書くことができます。 ■基本 const val1 = 1 > 0 ? 'trueです' :…
JavaScript | 単一式省力のアロー関数
一般的なアロー関数 一般的なアロー関数は下記のように書きます。 const name= (fullName) => { return fullN…
デイトラ | shopifyコースを受講開始しました
東京フリーランスが提供しているshopifyコースを現在受講しています。 僕自身shopifyはカスタマイズ経験はあるものの、納品フローの中で知識が怪しい点が…
【GA4】Google Analytics 4でUAコード取得する方法
2020年10月14日よりGoogleからGoogle Analytics4(GA4)がリリースされました。 それにあたり2020年11月23日現在web製作…
React Redux | Reducers
■Reducersの役割 Actionからデータを受け取り Storeのstateをどう変更するか決める →Store内のstateの管理人 ■initial…
React Redux | Actions
■Actionsの役割 ・アプリからStoreへデータを送るためのpayloadを渡す役割 →アプリから受け取ったデータをReducersへ渡す ■paylo…
React | ReduxとFluxフロー
■なぜReduxを使うのか 1.stateの見通しをよくするため 2.どこからでもsataeを参照/変更可能にするため 3.モジュールを疎結合するため Rea…
JavaScript | デフォルト値
JavaScriptの関数の引数にはデフォルト値を設定する事ができます。 まず先にデフォルト値を設定していないと下記ではundefinedが返ってきます。 c…
JavaScript | 分割代入
分割代入構文は、配列、オブジェクトから値を取り出して別個の変数に代入することを可能にするJavaScriptの式です。 https://…
All in One SEO | facebookシェアボタンの埋め込みと動的URLへの変更
All in One SEO を使ってソーシャル設定を行う中で facebookボタンの設置とボタンを動的URLにしている方法を書いていきます。 下記がFac…
React | stateの基本的な書き方
■stateの定義 ・this.stateとし、=でオブジェクトを代入する this.state = {name: ‘もり’}; ■stateの取得 ・thi…
#4 .stateの設計とクラスコンポーネントの作成
トラハックさんの講座を受けての自分用メモになります。 ■App.js ・Appクラスコンポーネントを作成 ■dataset.js ・中身はgithubから追加…
Firebase | RESTAPIの作成とFirestoreでデータを取得する
■REST APIを作る ・dataset.jsをjsonファイルに変える ・Cloud Functionでhttps関数の作成 ・デプロイ ・curlコマン…
Codegridで差がつく表現を
かっこいい表現のチュートリアルは海外のyoutubeサイトの方が充実しています。 中でもCodegridは紹介されているアニメーションや動画のクォリティの高さ…
React | Firebaseでデプロイするまでの注意点(2020.11月現在)
ReactのプロジェクトをFirebaseでデプロイするにあたり いくつか注意点があったので書き残していきます。 ■有料プランに変更 Blazeに変更しなけら…
.gitignoreの書き方 | キャッシュの消去
■.gitignoreとは .gitignoreはgithubへ不要なファイルをプッシュしたくないときに記入したファイルを取り除いてくれるファイルです。 ■使…
MATERIAL-UIをインストールする
■MATERIAL-UIとは ・React向けのUIコンポーネントライブラリ ・手軽にMaterialデザインを取り入れられることができる https://m…
React | 環境構築
■前提 ・node.jsインストール済み ・npmインストール済み ■creat-react-app ・node.jsインストール済み ・npmインストール済…
React | Hooksでstateを使う
■フック(hook)とは ・クラスの機能(stateやライフサイクル)をファンクショナルコンポーネントでも使える ・100%後方互換＝小さく導入できる ■なぜ…
JavaScript | import,export
■モジュール化とは ・JavaScriptではES2015から採用 ・基本的に1ファイル1モジュール ■名前ありexport ・モジュールから複数の関数をex…
レスポンシブのチェックなら「Responsive View」
レスポンシブのチェックができるサイトは色々ありますが 「Responsive View」が使い勝手がいいです。 使い方はURLを入力するだけです。 http:…
React | ライフサイクルについて
■ライフサイクル ・コンポーネントの時間の流れ ・生まれて、成長して、死ぬまで ・それぞれの段階でに必要な処理を記述 ■3種類のライフサイクル ・mounti…
React | stateについて
■stateとは ・コンポーネント内で管理する変数 ・プロップスとして子コンポーネントに渡せる ・ローカルステートと呼ばれる ★Reduxはどのコンポーネント…
React | コンポーネントについて
コンポーネント間でデータの受け渡しをする ■コンポーネントとは 1,見た目(View) 2,機能(Controller) コンポーネント=見た目＋機能 ■コン…
React | 入門の記録
■reactとは ・jsのライブラリ ・webのUIを作る ■JSX ・変数名などはキャメルケース 例 ・class→className ・const top…
JavaScript | 論理演算子
かつ && (アンバサンド) 条件が両方一致した時実行 const x = 20; const xStyle = x &…
git | よく使うコマンドリスト
ターミナルで操作するコマンドを忘れてしまうので自分用メモとして書き残していきます。 全てステージング git add . コミット git commit -m…
JavaScript | webAPIを叩く
今回はJavaScriptで初めてwebAPIを叩いたので書き残していきます。 async await構文 今回はasync await構文でwebAPIを叩…
gulpのインストール Sassを使うまでの手順
gulpを使うことが増えたのですが毎度使うまでの手順を微妙に忘れてしまうため、書き残していきます。大まか流れは下記の手順となります。 ・Node.jsをインス…
GitLabへのssh接続の沼にハマった話
Webデザイナーの森です。 GitLabへの.ssh接続で沼にハマったので、解決した方法を解説します。 Git初心者です。 そもそもssh接続とは 簡単に言う…
【超簡単】CODEPEN | コードペンの埋め込み方法
CODEPEN | コードペンの登録方法から埋め込みの方法までを解説します。 使うまではやや敷居の高いイメージがありましたが、とても簡単です。 CODEPEN…
「初学者向け」JavaScript | DOMとは
JavaScriptの学習を進めていく上で重要な「DOM」について解説します。 > Document Object Mod…
VSCode デザインテーマを変更するなら「vscodethemes」
VSCodeのデザインテーマを一覧できるサイトを紹介します。 簡単に変更できるので、気分を変えたい時にお勧めです。 > vscodethem…
uiGradients | グラデーションを使うならこれ
グラデーションを使いたい時に参考になるサイトを紹介します。 >uiGradients 公式はこちら uiGradients…