例）山田太郎 例）山田太郎 例）山田太郎 例）山田太郎 山田太郎 例）山田太郎 例）キーワード 例）キーワード 検索 検索 ボタンをクリック ボタンをクリック ボタンをクリック ボタンをクリック ボタンをクリック ボタンをクリック ラベルを入れてください ラベルを入れてください ラベルを入れてください ラベルを入れてください 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

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

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

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

01 アップデート内容

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

モジュールの新規追加

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

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

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

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

採用フォントの見直し 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 日本語 游ゴシック ヒラギノ角ゴシック、メイリオ

02 今後のリリース予定

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

03 アップデート方針

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

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

04 ソースコードの活用

GitHub ソースコードの活用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

06 今後の予定

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

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