何かしらに使えそうなネタや参考になったメモを留めるやつ
とらべらー【学び系】便利なショートカットキーたち
Ctrl+Tab
Ctrl+Shift+Tab
タブ移動
02:55 Ctrl + Shift + T
消したタブを復活させる
Alt+F4
ウィンドウを閉じる
Ctrl+F4
タブを閉じる
Ctrl+W
タブを閉じる
Windows＋D
デスクトップにする
Windows＋矢印
タブを分割する
Windows＋Ctrl＋D
（Windows＋Ctrl＋矢印）
（ Windows＋Ctrl＋F4）
仮想デスクトップを切り替える
Windows+数字
タスクバーのアイコンを開く
Windows+Shift＋S
スクショをとれる
Windows＋V
クリックボードが開く
Alt+Tab
画面の切り替え
F12
名前を付けて保存
Esc
キャンセルをする
Ctrl+Shift＋Esc
タスクマネジャーを開く
Windows＋L
画面のロック
とらべらー【学び系】デザイン・コーディングの工程をまとめてみた
参考サイト
Web制作に関わるひとたち
・Webディレクター
・WEBデザイナー
・フロントエンドエンジニア
・バックエンドエンジニア
Web制作のフロー
企画段階
ヒアリング
誰に何を何のために伝えるのか
サイトの目的
ペルソナ設定
サイトコンセプト決定
市場調査・分析
３C分析
使用する顧客
競合他社
クライアント
KPI立てる
KGI立て
KPIツリー作成
設計段階
提案
要件定義
どんな機能を持たせ、どこまで作るか
画面設計
画面内に配置する要素（ワイヤーフレーム）
それらの動き（プロトタイピング）
デザインコンセプトの決定
トンマナ設定
フォント
配色
画像
情報の優先度
全体のリズム
コンバージョンに向けた導線
デザインルール
フォント
レイアウト（余白・配置）
あしらい（見出し・ボタン）
共通パーツ
制作段階
デザイン制作 トンマナを形にする
トップデザイン
下層デザイン
ロゴ
アイコン
イラスト
システム開発
フロントエンド
バックエンド
検証
ブラウザ
デバイス
運用段階
分析
Google Analytics
KPI
改善
ポートフォリオ
作品の技術
課題発見・課題解決能力
自走力
一から要件定義して設計して制作する経験が必要
CSS設計やSCSSなどのスキルも必要
デザイン制作の工程をしっかりと踏んだ作品
5段階での具体的なデザイン手法
戦略段階
要件段階
構造段階
骨格段階
表層段階
KPI立てる
KPIツリー作成
メディアサイト
マーケティング
利益
ブランディング
PV＝セッション×回遊率
利益＝売上-支出
とらべらー| 主な用途 | コミットメッセージ |
|---|---|
| 初めてのコミット | 🎉Initial Commit |
| 一部機能更新 | ✨Update Feature |
| 文言修正 | 📝Modify wording |
| デザイン修正 | 🎨Accessibility |
| リファクタリング | ♻️Refactoring |
| バグ修正 | 🐛Bugfix |
| セキュリティ改善 | 👮Security improvement |
| パッケージ更新 | 🆙Package update |
| configの変更 | ⚙Config change |
| ドキュメント更新 | 📚Documentation |
| パフォーマンス改善 | 🐎Performance |
| 開発の更新 | 🔨Update Development |
| テスト用更新 | 🚨Tests |
| コンフリクト対応 | 💢Conflict |
| 非推奨追加 | 💩Deprecation |
| 削除 | 🗑️Removal |
| 進行中の作業 | 🚧Work In Progress |
| 名前の変更 | 🚚Rename |
| バージョンタグ追加 | 🔖Version Tag |
とらべらーHTML特殊文字
| 主な用途 | 特殊文字 | 実際の表示 |
|---|---|---|
| HTML内の空白（スペース） | |
|
| コピーライト表記 | © |
© |
| 商標登録表記 | ® |
® |
| バツ印（乗算） | × |
× |
| プラスマイナスの表記 | ± |
± |
| ＜（小なり） | < |
< |
| ＞（大なり） | > |
> |
| 円表記 | ¥ |
¥ |
とらべらーCMSの比較
| 名称 | 日本語対応 | ノーコード実装可 | コーディング可 |
|---|---|---|---|
| WordPress | ⭕ | ⭕ | ⭕ |
| MovableType.net | ⭕ | ⭕ | ⭕ |
| Wraptas | ⭕ | ⭕ | ⭕ |
| microCMS | ⭕ | ❌ | ⭕ |
| STUDIO CMS | ⭕ | ⭕ | ❌ |
| webflow CMS | ⭕ | ⭕ | ❌ |
| Squarespace | ⭕ | ？ | ？ |
| a-blog cms | ？ | ？ | ？ |
| おりこうブログAI | ？ | ？ | ？ |
とらべらー【解説系】関数・引数・戻り値のイメージ
関数：自販機
引数：お金
戻り値：ジュース
function 自販機（お金）{
ジュース＝お金×1.08
return ジュース
}
とらべらー【解説系】ライブラリ・フレームワーク・APIのイメージ
ライブラリ
：簡単にしてくれる物
例）消費税10%算出ライブラリ
tax(1000)⇒ 1100円が出て計算式書かなくて済む。
フレームワーク
：基本構成が詰まってる箱。
例）電卓セット
関数・ボタン反応任せてください。え？グラフ描画ですか？…
API
：相手のデータ受付・窓口
例）このデータが欲しい！⇒こう聞いてくれれば渡せますよ。
とらべらー【学習系】フロントエンドの学習メモ的なやつ
- HTMLとCSS
- JavaScript（ECMAScript2016 var）
- npmかyarn（パッケージマネージャ）
- Sass（CSS プリプロセッサ）
- Webpack（ビルドツール）
- ReactかVueかAngular（JavaScriptのフレームワーク）
- JaSST（テストツール）
- サーバーサイドレンダリング
とらべらー【学習系】しまぶーのIT大学より、デザイナーのコーディング問題についての一アンサー
デザイナーがどこまでコーディングするか問題について、React（やVue）でエンジニア側からCSS in JSまたはCSS Modulesのライブラリの使い方を説明したら、概ね理解して後は自走してコーディングしていけるぐらいだと個人的には嬉しい。
ReactでいうとJSXの記法を知るのとコンポーネントを作り方を知っているぐらいでも良いのかなーと。当然ロジックなどの部分まで理解できていた方がベターではある。
ただデザイナーとの共同作業のしやすさで言うとやっぱりTailwind CSS（とかReactと関係がないライブラリ）の方が良いかな。
Tailwind CSSの記法を覚えてもらう必要はあるけど経験上デザイナーはそういうのを覚えるのが得意な人が多かったのでそこまで問題にならないと勝手に思っている。
とらべらーWraptas関連のメモ
問い合わせページの組み込みに
Wraptasを活用した事例
とらべらーちょっと雑多にしすぎた。整理踏まえてクローズします。