スキル Skill

対応スキル
- Figmaでサイトをデザインする
  
  ユーザー様の要望/目標をデザインに落とし込み、機能性と利便性のあるデザインカンプを制作します。
- HTMLでマークアップする
  
  文脈に合った適切なタグを用いてマークアップしていきます。
  マークアップ後には正しくマークアップできているか、必ず以下のようなチェックをします
  - ・W3Cチェック(文書構造)
  - ・アウトライン(見出し構造)のチェック
  - ・alt属性のチェック
- CSSでスタイリングする
  
  「予測しやすい」「再利用しやすい」「保守しやすい」「拡張しやすい」CSS設計を意識したコーディングをします。
  普段はFLOCSSを元にフォルダ構成を考え、BEMの記法でコーディングしていますが、コーディング規約があれば、それに準じたコーディングをいたします。
- JavaScriptでサイトに動きを付ける
  
  ユーザー様をサイト内のコンテンツへ誘導するような、意味のある動きを付けることができます。
- WordPressでサイトをCMS化する
  
  ユーザー様が管理しやすく使いやすいシステムを構築します。サイト構成に応じて「カスタム投稿タイプ」「カスタムフィールド」「カスタムタクソノミー」を駆使してCMS化していきます。
使った教材
- HTML/CSS
  - 【書籍】
    1冊ですべて身につくHTML & CSSとWebデザイン入門講座
  - 【書籍】
    教科書では教えてくれないHTML&CSS
  - 【書籍】
    プロの「引き出し」を増やす HTML+CSSコーディングの強化書
- JavaScript
  - 【書籍】
    確かな力が身につくJavaScript「超」入門第2版
  - 【書籍】
    1冊ですべて身につくJavaScript入門講座
  - 【Udemy】
    【JavaScript&CSS】ガチで学びたい人のためのWEB開発実践入門(フロントエンド編)
- WordPress
  - 【Udemy】
    ちゃんと学ぶ、WordPress テーマ開発講座
  - 【書籍】
    WordPress 仕事の現場でサッと使える！デザイン教科書［WordPress 6.x対応版］
  - 【書籍】
    ビジネスサイトを作って学ぶ WordPressの教科書 Ver.6.x対応版
- デザイン
  - 【書籍】
    ノンデザイナーズ・デザインブック
  - 【書籍】
    デザイン入門教室
  - 【書籍】
    これからはじめるFigma Web・UIデザイン入門
今後の学習計画/目標
- コーディング
  
  ・GulpやEJSなどのツールを使い、より効率の良いコーディング環境の設定をする
  
  ・パーフェクトピクセルを意識した、デザインカンプの再現度の高いコーディングをする
- プログラミング/システム実装
  
  ・JavaScript/PHPの理解度を深め、要件に応じて柔軟な処理/表現力豊かなアニメーションを実装できるようにする
  
  ・様々な要件に対応できるWordPress実装力を鍛える
- デザイン
  
  ・FigmaやXDの多岐にわたる機能を使いこなし、プロトタイプ段階でコーディングのしやすい状態を作れるようになる
  
  ・デザインの基礎/原理・原則の知識を蓄え、あしらいのバリエーションを増やして制作物をたくさん作り、センスに頼らないデザイン力を向上させる