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