HCD(人間中心設計)入門 | UXとの違い

UX

デジタルの世界において年々ユーザビリティやユーザーエクスペリアンスが大切になってきているように感じます。またこれらの質を上げるためにデザイン思考や今回紹介する…

脳の仕組みとユーザー体験

Book

本書は脳内で起こるUX(体験)の構成要素を、認知科学の観点から紐解いた後、より良いUXを追求していく実践書です。要点を絞って書き残していきます。 ■背景 UX…

W3C validator 対策の備忘録

WordPress

■W3C validator とは W3CはWebの標準や規格を定めており、HTMLやCSSの規格も定めている団体です。 全てのWebサイトがこの規格を標準に…

GitHubからNetlifyにホスティングする

Gatsby

GithubからデプロイしてNetlifyにホスティングことがあったので備忘録として書き残していきます。 ■前提 ・Gatsbyプロジェクトのビルドが正常に完…

adobe | photoshopの備忘録 ※随時追加

Photoshop

■選択範囲 __選択解除 ⌘ d __自動選択 ・全レイヤーを選択が対象の場合は対象をONにする ・似た色の近くに隔たりがある場合は隣接のチェックをONにする…

アニメーションの歴史

UX

Web制作をしている中で、動きやアニメーションを考える機会は多いと思います。 アニメーションとは何のかを調べていくと、紀元前3000年から現在までのアニメーシ…

adobe | Illustratorの備忘録 ※随時追加

Design

adobeのソフト、Illustratorの基礎的な知識が多々ぬけており、基礎的な事を勉強しています。 備忘録として書き残していきます。 アンカーポイント ア…

shopify ローカルでコードを編集する方法

Shopify

shopifyのテーマファイルをローカルで編集する方法を学んだので書き残していきます。 ■ ディレクトリを作り、vscodeで開く まず空のディレクトリを作り…

webディレクターの仕事とは 【経験談】

ディレクション

今回はweb制作会社のディレクターとはどんな仕事をしているのか、ベンチャー企業での経験を元に書いていきます! webディレクターとは 一言で言うとwebサイト…

事例で学ぶブランディング

Book

本書は数々の世界企業のブランディングを行なっているLANDOR(ランドー)のブランディング、デザイン戦略が惜しみなく分かりやすく掲載されています。 webデザ…

LibSassからDart Sassへ移行

css

Sassで使っていた@importが、遅くとも2021年10月1日には廃止されるそうです。 https://sass-lang.com/blog/the-mo…

初めてのwebpack

webpack

以前からwebpackについて気になっていたのですが、Udemyで良さそうな講座を見つけたので この機会に勉強を始めました。 今回は備忘録として書き残していき…

作字デザインのチュートリアル

Design

現在IllustratorやPhotoshopの練習しています。 その中で気になるyoutubeチュートリアルでも練習しています。 今回は作字デザインのチュー…

Lesson 03 | ジャケットデザインを作る

Design

現在デザインの作り方、アイデア図鑑という本でデザインの勉強をしています。 ここでは勉強になったポイントや所感を書き残していきたいと思います。 ■今回のデザイン…

webデザイナーのタスク一覧

ディレクション

制作会社に勤務しながらたまに知り合いからWebサイトの依頼を受けています。 基本的に自身でディレクションしながら案件を進めているため初回の打ち合わせから納品ま…

Lesson 02 | 複数のイラストを上手に使う紙面構成

Design

現在デザインの作り方、アイデア図鑑という本でデザインの勉強をしています。 ここでは勉強になったポイントや所感を書き残していきたいと思います。 ■今回のデザイン…

Lesson 01 | イラストをメインにして力強く見せる

Design

現在デザインの作り方、アイデア図鑑という本でデザインの勉強をしています。 ここでは勉強になったポイントや所感を書き残していきたいと思います。 ■今回のデザイン…

scss | z-indexを効率的に管理する

css

レイアウトによってはz-indexが分かりづらくなったりすることがありますが、scssでは配列を見れば一目で順番が分かります。 ■使い方 まずは配列を用意しま…

scss | if文で条件分岐

css

scssでもif文が使える。 条件は変数にくる引数で判定する。 @if 変数 ==引数 { }else if { } See the Pen scssのif文…

デイトラShopifyコースを修了しました

Shopify

ECサイトのご相談を頂く事が増えてきた事から、デイトラのShopfyコースを受講しました。 無事コースを修了したので、感想とアウトプットを書いていきます。 h…

GSAPの読み込み | TweenMax、TimelineMax

JavaScript

■GSAPとは? TweenMax、TimelineMaxなどの総称を指す。 ■GSAPの読み込み 下記にアクセスし、Loading GSAPのスクリプトを読…

ディレイ | transition-delay

css

■transition-duration transition-durationはアニメーションの変化の時間 ■transition-delay transi…

イージング | animation-timing-functionの種類

css

■ease アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。 ■linear 等しい速度でアニメーションする。 ■ease-in プロパテ…

ブランディングが9割

Book

ブランディングに関する本をいくつか読んだ事がありますが、本書はブランディングを体系的に学ぶ事ができる点から、実務にも落とし込みやすく、入門書としてかなりお勧め…

P5.js | 覚えるべき数式 ※随時追加

p5.js

P5.jsには多くの数式が登場します。 随時追加していきます。 ■座標 座標は左上が(0, 0)です。 これは簡単ですね。 ■おはじきの法則 おはじきの法則で…

shopify | 注文備考欄を追加する方法

Shopify

shopifyはデフォルトで注文備考欄がありません。 ラッピングの希望を伝えたい案件では必須ですね。 注文備考欄をアクティブにする方法を紹介していきます。 注…

P5.js | マイナスの計算

p5.js

■マイナスの計算 基本的な数学の話になりますが -1 × -1 = 1 となります。 下記ではまずellipseのエックス座標にlocationXが入り、 l…

P5.js | 変数、if文、カラー

p5.js

■位置を変数で置き換える 下記のコードはX座標を変数locationXに格納し、ellipse()のエックス座標に使用しています。 またlocationX +…

P5.js | 入門

p5.js

P5.jsの基本的な事を書いていきます。 使い方 下記からCDNを読み込むことで簡単に利用できます。 <script src="htt…

React | アウトプット

React

Reactを学んだので一度アウトプットをしたいと思います。 ■作った物 ・TODOリスト https://react-firebase-hosting-2eb…

P5.jsの勉強をライトに始めました

JavaScript

P5.js Processingというアートやデザイン向けに開発された言語を、JavaScriptのライブラリとして使えるようにしたのがP5.jsのようです。…

React | 学習中のエラーまとめ

React

Reactの学習中で現在Reduxの学習しています。 体験したエラーを随時更新していきます。 今のところほとんど凡ミスです。 ■Module not foun…

JavaScript | 三項演算子

JavaScript

三項演算子はシンプルに条件分岐を書くことができます。 ■基本 const val1 = 1 > 0 ? 'trueです' :…

React Redux | Reducers

React

■Reducersの役割 Actionからデータを受け取り Storeのstateをどう変更するか決める →Store内のstateの管理人 ■initial…

React Redux | Actions

React

■Actionsの役割 ・アプリからStoreへデータを送るためのpayloadを渡す役割 →アプリから受け取ったデータをReducersへ渡す ■paylo…

React | ReduxとFluxフロー

React

■なぜReduxを使うのか 1.stateの見通しをよくするため 2.どこからでもsataeを参照/変更可能にするため 3.モジュールを疎結合するため Rea…

JavaScript | デフォルト値

JavaScript

JavaScriptの関数の引数にはデフォルト値を設定する事ができます。 まず先にデフォルト値を設定していないと下記ではundefinedが返ってきます。 c…

JavaScript | 分割代入

JavaScript

分割代入構文は、配列、オブジェクトから値を取り出して別個の変数に代入することを可能にするJavaScriptの式です。   https://…

React | stateの基本的な書き方

React

■stateの定義 ・this.stateとし、=でオブジェクトを代入する this.state = {name: ‘もり’}; ■stateの取得 ・thi…

Codegridで差がつく表現を

便利ツール

かっこいい表現のチュートリアルは海外のyoutubeサイトの方が充実しています。 中でもCodegridは紹介されているアニメーションや動画のクォリティの高さ…

.gitignoreの書き方 | キャッシュの消去

Git

■.gitignoreとは .gitignoreはgithubへ不要なファイルをプッシュしたくないときに記入したファイルを取り除いてくれるファイルです。 ■使…

MATERIAL-UIをインストールする

React

■MATERIAL-UIとは ・React向けのUIコンポーネントライブラリ ・手軽にMaterialデザインを取り入れられることができる https://m…

React | 環境構築

React

■前提 ・node.jsインストール済み ・npmインストール済み ■creat-react-app ・node.jsインストール済み ・npmインストール済…

React | Hooksでstateを使う

React

■フック(hook)とは ・クラスの機能(stateやライフサイクル)をファンクショナルコンポーネントでも使える ・100%後方互換=小さく導入できる ■なぜ…

JavaScript | import,export

JavaScript

■モジュール化とは ・JavaScriptではES2015から採用 ・基本的に1ファイル1モジュール ■名前ありexport ・モジュールから複数の関数をex…

React | ライフサイクルについて

React

■ライフサイクル ・コンポーネントの時間の流れ ・生まれて、成長して、死ぬまで ・それぞれの段階でに必要な処理を記述 ■3種類のライフサイクル ・mounti…

React | stateについて

React

■stateとは ・コンポーネント内で管理する変数 ・プロップスとして子コンポーネントに渡せる ・ローカルステートと呼ばれる ★Reduxはどのコンポーネント…

React | コンポーネントについて

React

コンポーネント間でデータの受け渡しをする ■コンポーネントとは 1,見た目(View) 2,機能(Controller) コンポーネント=見た目+機能 ■コン…

React | 入門の記録

React

■reactとは ・jsのライブラリ ・webのUIを作る ■JSX ・変数名などはキャメルケース 例 ・class→className ・const top…

JavaScript | 論理演算子

JavaScript

かつ && (アンバサンド) 条件が両方一致した時実行 const x = 20; const xStyle = x &…

git | よく使うコマンドリスト

Git

ターミナルで操作するコマンドを忘れてしまうので自分用メモとして書き残していきます。 全てステージング git add . コミット git commit -m…

JavaScript | webAPIを叩く

JavaScript

今回はJavaScriptで初めてwebAPIを叩いたので書き残していきます。 async await構文 今回はasync await構文でwebAPIを叩…

gulpのインストール Sassを使うまでの手順

Gulp

gulpを使うことが増えたのですが毎度使うまでの手順を微妙に忘れてしまうため、書き残していきます。大まか流れは下記の手順となります。 ・Node.jsをインス…

GitLabへのssh接続の沼にハマった話

Git

Webデザイナーの森です。 GitLabへの.ssh接続で沼にハマったので、解決した方法を解説します。 Git初心者です。 そもそもssh接続とは 簡単に言う…