こんにちは、ハヤマです。
今回は、Figmaを使った資料作成について考えてみたいと思います。
例えば、よくあるのがCMSを組み込んだサイトをクライアントが円滑に運用できるように準備する操作マニュアルなど。
制作ツールはGoogle スライドやPowerPoint、はたまたマニュアル作成専用のものなど様々にありますが、Figmaも上手に使えば、効率よく資料作成ができるのでは、と思いました。
今回は「効率化」という面で、資料作成に便利そうなプラグインを調べてみました。
(駆け足で紹介していきます!)
ページネーション
Paginate
その名の通り、ページネーションや要素の自動配置が簡単に実現できます。 対象のコンポーネントを選択して実行すると、それぞれのコンポーネントに連番で数字が振られます。
矢印パーツ付与
Autoflow
Autoflowの操作パネルを開いた状態で、矢印で繋げたい2つの要素をShift選択すると矢印が追加されます。
遷移図を作る時などに便利そうです。
採番
Count up marker
マニュアル作成時、操作画面のキャプチャーに説明用の採番をつけることが多いですが、そんな時に便利。
これを使えばワンクリックで番号パーツを作成できます(クリックの度にカウントアップ)。
※フォント(ウェイトも含む)変更は不可。背景色の変更は可能
スタイル管理
Design Lint
ページ内で使用しているフォントの種類やスタイル(角丸やシャドウなども対象)を検出・整理することができます。
スタイルが適用されていない要素をリスト化してくれるので、一括選択してスタイルを指定することができます。
マニュアル内のトンマナ統一に役立ちそうです。
校正
テキスト校正くん
アートボード内の選択中のテキストに対して、文章校正を行ってくれます。
主なチェック内容
・ウェブの用語や名称の表記統一(Javascript → JavaScript、Gitghub → GitHub等)
・「ですます」調と「である」調の混在
・ら抜き言葉
・二重否定
・同じ助詞の連続使用
・同じ接続詞の連続使用
・逆接の接続助詞「が」の連続使用
・全角と半角アルファベットの混在
・弱い日本語表現の利用(〜かもしれない)
・読点の数(1文に3つまで)
・漢字の閉じ方、開き方(下さい → ください、出来る → できる等)
Textlint for Japanese
「実用文としてわかりやすい日本語を書くための文章解析ツール」とのこと。
選択したテキストレイヤーに対してチェックが行われます。
主なチェック内容
・長すぎる文書を用いない
・読点を多用しない
・漢字は連続して使用しない
・漢数字と算用数字を使い分ける
・二重否定は使用しない
・ら抜き言葉を使用しない
・同じ接続詞を連続して使用しない
・同じ助詞を多用しない
・冗長な表現を用いない
・「ですます調」と「である調」を混在させない
・漢字とひらがなを使い分ける
さいごに
誰が作っても、手軽にテンプレートを遵守した仕上がりを目指したいですね。
Figmaはプラグインが充実しているので、コンポーネントやオートレイアウトの機能も使いつつ活用すれば、時短につながる気がします。
(初めてFigmaをさわる方は、事前にツールや基本操作の理解が必要と思います)
他にも、探すと色々なプラグインを見つけられると思うので、気になる方はぜひ調べてみてください。
【Information】
次回アームズブログの更新ですが、8/27(水)を予定しています。
時候の挨拶としては初秋を迎える時期ですが、まだまだこれからも暑い日が続きます。どうぞ体調に気をつけてお過ごしください。