LibSassからDart Sassへ移行
Sassで使っていた@importが、遅くとも2021年10月1日には廃止されるそうです。 https://sass-lang.com/blog/the-mo…
2021年
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…
知覚力を磨く -絵画を観察するように世界を見る技法-
最近読み終えた「知覚力を磨く」のアウトプットです。 デザイナーやエンジニアのみならず、クリエイティブなことに関わってる方へ強く勧めできる内容です。 知覚を通じ…