小島 芳樹のカリキュラム・レッスン
1986年生まれ。会社員としてWebデザイン・ディレクション・事業開発・マーケティングの仕事に携わる傍ら、デザイナーやエンジニア向けの勉強会・コミュニティの運営や、いくつかのスタートアップの支援に関わっていました。2018年5月に独立をし、2019年4月にちょっと株式会社を設立・代表取締役に就任。現在は子育てと経営の両立を目指して奮闘中!
Twitter: @yoshikikoji
はじめての『WordPress』入門
Sassを使った効率的CSSコーディング術
1. Sassの概要と利用の準備
2. Sassの基本的な使い方
3. Sassの応用的な使い方
UI/UXデザインツール『Adobe XD』入門
1. Adobe XDの概要とインストール
UI/UXデザインツール『Sketch』入門
8. Sketchをチームで使う
Sketchプラグインまとめ
便利なプラグイン
- 余白をいい感じに付けて書き出しができるSketchプラグイン『Sketch Slicer』
- SVGファイルを書き出す際に自動的に圧縮してくれるSketchプラグイン『SVGO Compressor』
- デザインの仕様書が簡単に作れるSketchプラグイン『Sketch Measure』
- Sketchをコマンドで動かせるプラグイン『Sketch Runner』(無料版)
- 足りないフォントを探してくれるSketchプラグイン『FontBuddy』
- バラバラのアートボードやシンボルを整列するSketchプラグイン『Sketch Align』
- アートボードやレイヤー・シンボルの名前を一括で変更できるSketchプラグイン『Rename It』
デザインを学ぼう!chot.designの使い方
1. chot.designをはじめる前に
2. 職種別デザイン学習のコツ
はじめてのWebデザイン『HTML・CSS』入門
3. CSSの基礎知識
- 3-2. CSSで文字の色を変更する
- 3-3. 文字を太くする(font-weight)・斜めにする(font-style)・下線をつける(text-decoration)
- 3-4. 文字の大きさを変更する(font-size)
- 3-5. 文字揃えと行の高さを指定する(text-align・line-height)
- 3-6. 背景色と背景画像を設定する(background)
- 3-7. 横幅と高さを指定する(width・height)
- 3-8. 要素の表示形式を変更する(display)
- 3-9. 要素に余白を空ける(margin・padding)
- 3-10. 要素に枠線をつける(boder)
- 3-11. 指定した要素を回り込みさせる(float・clear)
- 3-12. 要素を自由に配置する(position)
- 3-13. コーナーに角丸を指定する(border-radius)
- 3-14. 要素や文字に影をつける(box-shadow・text-shadow)
- 3-15. 疑似要素(before・after)の使い方
UI/UXデザインツール『InVision Cloud』入門
1. InVision Cloudの概要
2. プロトタイプを作成する
- 2-1. プロトタイプ機能の主な用途
- 2-2. プロトタイプのプロジェクトを作成してデザインのアップロードをする
- 2-3. 画面一覧の使い方
- 2-4. リンク先とジェスチャー・アニメーションを設定する
- 2-5. 複雑なリンク設定(ページ内スクロール・前に戻る・外部サイト・自動リンク・オーバーレイ)
- 2-6. SketchからInVision Cloudにデータをアップロードする
- 2-7. iPhoneのステータスバーの表示を切り替える
- 2-8. プロトタイプを共有して、コメント・フィードバックをもらう
- 2-9. 制作状況を管理するためのワークフロー機能を使いこなす
- 2-10. ヒストリーモードで過去のバージョンを確認する