Slide 1

Slide 1 text

例)山田太郎 例)山田太郎 例)山田太郎 例)山田太郎 山田太郎 例)山田太郎 例)キーワード 例)キーワード 検索 検索 ボタンをクリック ボタンをクリック ボタンをクリック ボタンをクリック ボタンをクリック ボタンをクリック ラベルを入れてください ラベルを入れてください ラベルを入れてください ラベルを入れてください 5月 月 火 水 木 金 土 日 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 2 3 4 ... 12 1 ... 9 10 11 12 アイテム01 アイテム02 アイテム03 アイテム01 アイテム02 アイテム03 アイテム01 アイテム02 アイテム03 アイテム01 アイテム02 アイテム03 Ver.2.0の紹介 UTSUWAテーマ 有限会社アップルップル 森田かすみ a-blog cms LIVE Vol.7

Slide 2

Slide 2 text

有限会社アップルップル デザイナー 森田かすみ 新卒でアップルップルに入社。5年ほどHTML/CSS/CMS実装を中 心にフロントエンドエンジニアとして受託業務を経験し、現在はプ ロダクトのインハウスデザイナーとして勤務している。プロダクト のUI改善/サイト改善/イベントの企画/ノベルティ作成などを担当。 @KasumiMorita

Slide 3

Slide 3 text

先日、UTSUWA Ver.2.0をリリースしました https://developer.a-blogcms.jp/blog/changelog/release-utsuwa200.html

Slide 4

Slide 4 text

目次 ( アップデート内" ( 今後のリリース予 ( アップデート方È ( ソースコードの活É ( デザインファイルの活É ( 今後の予定

Slide 5

Slide 5 text

01 アップデート内容

Slide 6

Slide 6 text

アップデート内容 I モジュールの新規追B I ドロップダウンメニューの実" I 動的フォームのスタイリン I TypeScaleの導& I rem対X I 採用フォントの見直し

Slide 7

Slide 7 text

モジュールの新規追加

Slide 8

Slide 8 text

ドロップダウンメニューの実装 実装時の注意点 ナビゲーションモジュールの表示設定

Slide 9

Slide 9 text

動的フォームのスタイリング allow_tpl_path: [recruit/thanks.html] config.system.yamlの書き方 動的フォーム利用時には以下の記述を 行ってください

Slide 10

Slide 10 text

TypeScaleの導入 16px - 1.25倍(Major Third) Type Scale - A Visual Calculator .sample-heading { font-size: map.get(global.$font-scales, heading-ss); } 画面右側の[デザイン]パネル内の[テキスト] から利用可能です SCSSファイルの使用方法 Figmaファイルの使用方法 デフォルトの設定

Slide 11

Slide 11 text

t ユーザー側のブラウザのフォントサイズを優先していたときのための対A t rem対応に伴い8ptグリッドシステムを採% t 最小は4px、基本8px単位で余白を確保していますU t 関連してくる項目:フォントサイズ、padding、marginなどの余白、
 メディアクエリーなど 1rem=16px、.5rem = 8px、.25rem=4px rem対応 ルートのフォントサイズが16pxだったときのremとpxの考え方

Slide 12

Slide 12 text

採用フォントの見直し Ver.2.0 のCSSのfont-familyの書き方 font-family: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", meiryo, sans-serif; 以前のバージョン Ver. 2.0 英数字 Google Fonts Helvetica Neue、Arial 日本語 游ゴシック ヒラギノ角ゴシック、メイリオ

Slide 13

Slide 13 text

02 今後のリリース予定

Slide 14

Slide 14 text

今後のリリース予定 0 メインビジュアルの追% 0 メガナビゲーションメニューの新規追% 0 資料ダウンロードページの新規追% 0 イベント情報ページの新規追加

Slide 15

Slide 15 text

03 アップデート方針

Slide 16

Slide 16 text

従来よりもより速く最新のUTSUWAを利用可能になります 今後のアップデート方針 GitHub Figma

Slide 17

Slide 17 text

これからはマイナーバージョン公開のタイミングで そのとき最新版のUTSUWAが同梱されます CMS本体への反映 Ver. 3.0 Ver. 3.1

Slide 18

Slide 18 text

04 ソースコードの活用

Slide 19

Slide 19 text

GitHub ソースコードの活用

Slide 20

Slide 20 text

GitHubから使う方法 https://github.com/appleple/acms-utsuwa themes/utsuwaフォルダをクローンまたはダウンロード

Slide 21

Slide 21 text

themesディレクトリの直下に「utsuwa」を新規作成して ダウンロードしたファイルを設置します ※すでにutsuwaテーマがある場合は、古い方のフォルダの名前をリネームまたは削除してください インストール方法

Slide 22

Slide 22 text

/_bin/utsuwa/を/bin/utsuwa/に設置する ※すでにutsuwaテーマがある場合は、古い方のフォルダの名前をリネームまたは削除してください インストール方法 /_bin/utsuwa/
 (GitHubからダウンロードしたファイル) /setupをリネームしたフォルダ/bin/

Slide 23

Slide 23 text

メンテナンスメニューにアクセスする
 (https://ドメイン/setupをリネームしたフォルダ/index.php) インストール方法

Slide 24

Slide 24 text

「インポート実行画面へ」を押下する インストール方法

Slide 25

Slide 25 text

1. インポート先またはその親になるブログを選択してください。
 →任意のものを選択
 2. インポートするブログデータ名を選択してください。
 →「utsuwa」を選択
 3. コンフィグ関連のインポート設定
 →新規インストールの場合は全てチェック インストール方法 「インポートを実行する」を押下する

Slide 26

Slide 26 text

インストール方法 UTSUWAを設置したURLへアクセス

Slide 27

Slide 27 text

インストール方法のドキュメント https://github.com/appleple/acms-utsuwa GitHub READMEで改めてご確認ください

Slide 28

Slide 28 text

05 デザインファイルの活用

Slide 29

Slide 29 text

Figma デザインファイルの活用

Slide 30

Slide 30 text

Figmaの料金体系について チーム内に3ファイル、3ページまで 下書き(個人用ファイル)数無制限 以下の範囲なら無料で使用できます それ以上使う場合なら有料プランへ https://www.figma.com/ja/pricing/

Slide 31

Slide 31 text

ファイルをコピーする https://www.figma.com/community/file/1154719653085540673 要ログイン  Figmaファイルを使う

Slide 32

Slide 32 text

その場でページを切り替える https://www.figma.com/community/file/1154719653085540673 Figmaファイルを閲覧する ログイン不要

Slide 33

Slide 33 text

 Figmaファイルでできること サイトの全体像を把握でき( ロードマップが確認でき( スタイルガイドが確認でき( システムで使用しているユニットや組み込みJSの
 画像データを取得できる

Slide 34

Slide 34 text

06 今後の予定

Slide 35

Slide 35 text

今後もどんどんアップデートしていく予定です アップデート情報は開発ブログやSNS、Slackコミュニ ティで告知します 今後の予定

Slide 36

Slide 36 text

ご清聴ありがとうございました! ご質問 ご意見 コメント欄にてお待ちしております