Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
ご清聴ありがとうございました! ご質問 ご意見 コメント欄にてお待ちしております