# OVERVIEW

Photoruction Design Systemは関係するすべての人々が、自分の仕事に誇りを持てる体験を伝えるために作られたデザインシステムです。誰もが生産性高く、フォトラクションらしいデザインを作れるよう複数の要素で構成されています。　　 ### Structure PRINCIPALS（基本原則）をもとに、色やフォントなどの基本要素であるマテリアルが、すべてのデザインの起点となります。 コンテンツの内容は、まだ未完成のものであっても最速挙動の精神で実行しながら軌道修正をしていきます。
### Contents
基本原則/pages/PHZuX4ZmGsBl5UOvaZCH/files/UEoRJqdJlOL5af8lTeVp
基本要素/pages/6BAosoAXe0iaIHS6l3Rl/files/nNYS1dEgEXwTFneziIdD
デザイントークン/pages/Y4zwB6WgAGPm7AEJbjWJ/files/8Z2r1iejSuOb8WmFP0z6
コンポーネント/pages/blvtenxHQDWBzYKc6Pxx/files/lVEQBEUVxZAbMNLC2QfS
ライティング/pages/X8bh2YydfLXikpWd60bl/files/S8TozNxbPoJDVu1euWxR
デザインパターン/pages/Bb93G1dcmJfbhHcMUWWQ/files/CRuVjdkGKarGYybrjFPl
オーダーボード/pages/5tL6MSJ9M1Bc2MUuYxQU/files/n0sRanxsmElbbGgKjdBD
ツールズ/pages/61nI85qOrwRfVXq1YCRi/files/1UgLmfZzlv3MfYuMjOyN
# PRINCIPALS 基本原則 私たちは、「建設の世界を限りなくスマートにする」というミッションを達成するために、各ステークホルダーとコミュニケーションを取る中でデザインを軸に活動しています。プロダクトはもちろんのこと、ロゴやサイト、ドキュメントなど、サービスに関わるありとあらゆるシーンでデザインの基本原則を用いることで、世界観をブレることなく表現することが可能です。 {% hint style="success" %} ## Clarity 明瞭である デザインに触れる箇所に焦点を当て、明確かつ分かりやすい内容を心がけます。\ 作り手の都合や妥協による曖昧さを排除し、人々が自信を持って行動できるようにします。 {% endhint %} {% hint style="success" %} ## Consistency 一貫性がある 同じ課題に対しては同じ解決策を提示しましょう。\ 違う課題に見えても、出来る限りの共通項を見出し、解決策をパターン化することで、関わる人々が直感的に使えるようにすることが大切です。 {% endhint %} {% hint style="success" %} ## Productivity 生産性を考慮する 転記や繰り返しのように、同じことを繰り返すことは誰もが望むことではありません。\ ワークフローを自動化したり最適化することで、関係者の生産性を向上させることができます。 {% endhint %} {% hint style="success" %} ## Objective 目的を達成できる どんなに美しくても面白くても、人々が迷ったり悩んだりするデザインは正しくありません。\ デザインの受け取り手が思い描いた目的を「確実に」達成できるようにします。 {% endhint %} {% hint style="success" %} ## Hospitality 痒い所に手が届く 思いやりの心を持ち、常に安心して使えるデザインにすることで、自分のために作られた特別なデザインだと思われることを目指します。 {% endhint %} # MATERIALS 基本要素 Photoructionらしいデザインを構成している基本的な要素となります。 他のデザインの根本的な材料を示しており、最低限の内容のみ記載しているため、詳細は各部分をご確認ください。
ロゴ/pages/4T8XPgUYyHhDybPMg3sz
色/pages/zBDIqoCmzzeTJ93IBjU5
フォント/pages/1SxnYVZQpEmOWqJXWNTf
アイコン/pages/lobSloZwA4VXRBF7lgse
イラスト/pages/P9KTSfu2YJQCesGRzGYG
# ロゴ 使用する際は、本ガイドラインに従ってください。
ダウンロードhttps://photoruction.box.com/s/4jlhgalq1yrijfmr6ioyp2pd6bcx8r8g
## アイソレーション ロゴの独立性・識別性を保つため、ロゴタイプやロゴマークの周囲には十分なスペースを設けてください。アイソレーションエリアの中には背景以外の要素を入れてはいけません。
## 背景 白もしくは白と定義できる色の背景場合、カラーロゴを使用してください。青色の背景、あるいは暗い色の背景上ではホワイトロゴを使用してください。グレースケール且つ白背景の場合はブラックロゴ、黒背景の場合はホワイトロゴを使用してください。 塗り背景\
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ## 写真背景
## 禁止背景 白もしくは白と定義できる色の背景場合、カラーロゴを使用してください。青色の背景、あるいは暗い色の背景上ではホワイトロゴを使用してください。グレースケール且つ白背景の場合はブラックロゴ、黒背景の場合はホワイトロゴを使用してください。
ロゴの書体を変えない/files/H6Xz4FmIJRfswysghs7N
影をつけてはいけない/files/EHnu5kCp94cFbAgZ0y62
ロゴを分解しない/files/LGSfenXthnCk5bMebmTI
縦横比を変えない/files/759yztovlV1Z1jjcIB5Y
傾けてはいけない/files/N32TSw4N4MehAmfUvElD
指定の色以外を使わない/files/aaBPIYMac4sRwl64Xw8z
縁取りしない/files/03C9ufeRs8xCCDDquasV
黒背景にカラーロゴを使わない/files/IOFUCwEwa4ZV0lr7lf7E
不明瞭な表現をしない/files/Fzdlqcsm5jRorIBreDKm
## ロゴのコンセプト フォトラクションのシンボルロゴに込められた想いについてまとめています。 ### シンボル
フォトラクションの新たなシンボルとしてinfinite note(無限音符)を掲げ、建設業で働く人々に対してずっと「わくわくや驚き、安らぎ」をもたらす存在であることを示します。 ### ロゴの背景 ## 建設業に登場する全ての主人公と共に物語をつくる 「建設会社のパートナーになりたい」、「フォトラクションがないと建物が立たないと言われたい」、「30業種目の建設業種になりたい」。\ \ これらはインタビューを通して出てきたフォトラクションで働くメンバーの想いです。\ 「フォトラクションは建設業にとってなくてはならない存在でありたい」\ \ ではそもそも建設業とは一体なんなのでしょうか？\ \ 私たちの生活は建物なくしては成り立ちません。病院で生まれ、お家で寝起きし、学校で学び、会社で新たな価値を生み出す。ありとあらゆる活動に建物が関わっています。\ \ 建物を作る人々は私たちの人生という物語を作っているとも言えるのではないでしょうか。\ \ そして、29業種ある建設の職業はどれひとつかけても建物は立ち上がりません。建設業で働く人々は皆、物語をつくる主人公なのです。\ \ フォトラクションは建設業に登場する主人公と共に物語を作ることで、建設業にとってなくてはならない存在になります。 ### シンボルに込められた想い フォトラクションのシンボルフォルムは「p」と「s」を中心に構成されており「protagonist & story」、「performer & sound」、「photoruction & smart」の３つの意味が込められています。 #### protagonist & story
建築士が設計し、積算で費用を出し、施工管理が施工する。そうしてできた建物の中で多くの人々が生活し新たな価値を生み出していく。\ \ 建設業に登場する主人公が数々のシーンを紡ぐことで新たな物語が誕生し、その物語が進むことで新たな主人公が登場するという建設が生み出すサイクルそのものを表しています。 #### performer & sound
映画やアニメ、演劇では当然のようにBGMや効果音が流れています。これらの演出があるかないかで物語の臨場感やワクワク感は大きく違ってきます。\ \ シーンに応じた演出があってこそ主人公が引き立ち物語が展開します。\ \ フォトラクションは物語における主人公と音響の関係のように、建設業の人々にシーンに応じたサービスを提供することで、仕事におけるワクワク感を高めます。 #### photoruction & smart
フォトラクションがスマートであることを示し、「建設の世界を限りなくスマートにする」弊社のミッションをそのまま体現しています。 # 色 フォトラクションらしい「スマートさ」を印象づけるカラーセットです。プレゼンテーションスライドや営業資料などに用いることで視覚的統一感を出すことができます。 {% embed url="" %} # フォント フォトラクションではグローバルユースに対応するため、基本的に下記２種類のフォントを使用します。使用にあたってはあらかじめgoogle fontsから自身のデバイスにダウンロードしておく必要があります。 {% embed url="" %} {% embed url="" %} {% embed url="" %} # DESIGN TOKEN デザイントークン
​色/pages/b6gEJmCkEPHFUtjUXYJu
タイポグラフィ/pages/YP3smLzKFI1Gy3tSrvGm
角丸/pages/b6VWQggW1g9VMZZG9QAu
影/pages/642GxnfqV9MmtgFj14Ke
スペース/pages/R9Wi7DHdCajXPWmddP09
レイアウト/pages/KJ1BHwOMHGFQiyDt04sN
# 色 {% embed url="" %} # タイポグラフィ フォントの太さは２種類とし、大きさは下記の通りとする。 [Goole Fonts](https://fonts.google.com/noto/specimen/Noto+Sans+JP) {% embed url="" %} ## Android | token | size | font-weight | | ---------- | ---- | ----------- | | Headline 1 | 96px | Light | | Headline 2 | 60px | Light | | Headline 3 | 48px | Regular | | Headline 4 | 34px | Regular | | Headline 5 | 24px | Regular | | Headline 6 | 20px | Medium | | Subtitle 1 | 20px | Regular | | Subtitle 2 | 16px | Medium | | Body 1 | 16px | Regular | | Body 2 | 14px | Regular | | Button | 14px | Medium | | Caption | 12px | Regular | | Overline | 10px | Regular | ## iOS | token | size | font-weight | | ----------------- | ---- | ----------- | | Large Title | 96px | Light | | Title 1 | 60px | Light | | Title 2 | 48px | Regular | | Title 3 | 34px | Regular | | Headline | 24px | Regular | | Body | 20px | Medium | | Callout | 20px | Regular | | Subhead | 16px | Medium | | Footnote | 16px | Regular | | Caption 1 | 14px | Regular | | Caption 2 | 14px | Medium | | Bottom Navigation | 12px | Regular | # 角丸/シャドウ 本サービスで使用する角丸とシャドウ {% embed url="" %} # スペース 本サービスで使用する余白の基準は原則４と８の倍数で設定する。40px以上は８の倍数pxを基本とする。 {% embed url="" %} # COMPONENT コンポーネント Photoructionらしいデザインを構成しているコンポーネントです。
Common Rules/pages/GCNlNt4XDwYaZlqJxzHX
Accordion/pages/YLdRjZvSnnZRdauSomxG
Artwork/pages/QhSY7PF3g8Y4719T1BfS
Badge/pages/10cVhFXSdpIb5fu6PunF
Balloon/pages/XZZYVIiSMe8sscFxt2oc
Button/pages/H7hq8cSuoVpvh2aa4GUO
Card/pages/vUXQV68cUup2r0ZDdDze
Dropdown/pages/wnNGu9f7Gf2uadZjbFa5
Footer/pages/ICCbrbEuzOWDGcybKuXb
Form/pages/FKATQyGQw2B7Y5lTaOs2
Header/pages/YoEBH72HRKf2akCVIaH9
Headline/pages/nptYmL1wBUQcbmvzkCJv
Icon/pages/vkQXB6QMEuJ13mAXCWgS
Logo/pages/dLwNtxpFzdCW2wjLztwt
Modal/pages/wF2Z9JHT65TiedWPQpt8
Pankuzu/pages/g2qGsvqY5emxAmPUrRiV
Side Panel/pages/eoSwPNagNAXYpUDTRD8w
Table/pages/WGQ6nd3ZQUy7r6rUgO7V
Tool Bar/pages/L4VhWECKtjCP5IYtna7X
# Common Rules {% embed url="" fullWidth="false" %} # Accordion {% embed url="" %} # ArtWork {% embed url="" %} # Badge {% embed url="" %} # Balloon {% embed url="" %} # Button {% embed url="" %} # Card {% embed url="" %} # Dropdown {% embed url="" %} # Footer {% embed url="" %} # Form {% embed url="" %} # Header {% embed url="" %} # Headline {% embed url="" %} # Icon {% embed url="" %} {% embed url="" %} # Logo {% embed url="" %} # Modal {% embed url="" %} # Pankuzu {% embed url="" %} # Side Panel {% embed url="" %} # Table {% embed url="" %} # Tool Bar {% embed url="" %} # WRITING ライティング ライティングはPhotoructionのプロダクト内において、文書や文字で表現するものに関する指針を表しています。なお、プロダクトの範囲はヘルプページやプロダクトからの自動送信のメールなども含まれています。
ライティングスタイル/pages/pWTAgQaNWt53iY3bvJWJ
UI/pages/aDLlg5TxfQFPgYUP4yk1
BPOメニュー/pages/zZHT0L0oAATPXp0tDsfp
メール/pages/IXvgcS98I4KgOq3MaJOD
# ライティングスタイル 文書を書くにあたって基本的な指針を示します。 ## 最も伝えたいことだけを書く 文書は人に伝えるためにあります。何を最も伝えたいかを考えて冗長な表現を排除し簡潔に表現しましょう。 {% hint style="success" %} 絞り込む条件を設定すると、写真を簡単に見つけることが出来ます {% endhint %} {% hint style="danger" %} 撮影した写真に付加された情報において絞り込む条件を設定することで、目的の写真を簡単に見つけ出すことを可能にする機能です。 {% endhint %} ## 文法的を正しく使う メールや口頭で使用されることが多い「ご参考ください」という表現は文法的には誤りです。正しくは「ご参考にしてください」です。「ご◯◯ください」は「ご利用ください」など、「◯◯する」と言い換えられるときに使用します。 ## 見出しには句点（。）を使わない 文章の見出しにになる部分には句点は使わない。\ 読点（、）に関しては正しさよりも、見た目の読みやすさを重視して活用する。 ## オリジナルの言葉は原則使わない 調べても出てこない、もしくは異なる意味で使うオリジナルな表現や単語は原則使わないでください。 ## ひらがなで書いた方が見やすい場合は漢字を使うのをやめる 真剣に読まなくても伝わるよう、無駄に漢字を使うのはやめましょう。ただし、ひらがなが多くなりすぎることにも注意しましょう。 参考 {% embed url="" %} | 読み | 正 | 誤 | | ----- | ----- | ---- | | アラカジメ | あらかじめ | 予め | | イタシマス | いたします | 致します | | イタダク | いただく | 頂く | | オヨビ | および | 及び | | クダサイ | ください | 下さい | | ゴゾンジ | ごぞんじ | ご存知 | | コト | こと | 事 | | コロ | ころ | 頃 | | サキホド | さきほど | 先程 | | サマザマ | さまざま | 様々 | | サラニ | さらに | 更に | | スデニ | すでに | 既に | | スナワチ | すなわち | 即ち | | スベテ | すべて | 全て | | ゼヒ | ぜひ | 是非 | | ソバ | そば | 側 | | タクサン | たくさん | 沢山 | | タダ | ただ | 只 | | タダシ | ただし | 但し | | タメ | ため | 為 | | トオリ | とおり | 通り | | トキ | とき | 時 | | ナド | など | 等 | | ナラビニ | ならびに | 並びに | | マズ | まず | 先ず | | マタ | また | 又 | | マデ | まで | 迄 | | モッテ | もって | 以て | | モットモ | もっとも | 尤も | ## 同じことを複数の表現で説明しない ヘルプページでは〇〇と表現しているものが、プロダクトを見ると△△で表現されていると言ったことがないようにする。 ## 説明はないよりあった方が良い 何もないよりはあった方が相手に伝わりやすいです。\ 確かに説明なしで直感的に使えるデザインは素晴らしいですが、それでも説明は入れたほうが親切です。
# UI プロダクトのUIで使うテキストのスタイルを定めています。 ## ボタンやリンクなどでアクションを表す場合は目的語＋「を」＋動詞で表す 何に対してどんな事を行うのかが端的に伝わるように、アクションに関しては敬体（ですます）や修飾語はつけずに、目的語と動詞のみで表します。 {% hint style="success" %} 図面を追加 {% endhint %} {% hint style="danger" %} 新しい図面を追加する {% endhint %} ## モーダルやダイアログのタイトルなどで、アクションを表す場合は目的語＋「を」＋動詞＋「する」で表す アクションに対するオブジェクトが主になることかつ説明文として扱いたいため、動作や行為を表す「〜する」の形で表記します。 {% hint style="success" %} 図面を追加する {% endhint %} {% hint style="danger" %} 図面を追加 {% endhint %} ## オーダーボードの見出しはアクションを表す表現とし、目的語＋「を」＋動詞で表す。 実施してほしい唯一のことを簡潔に表現します。 {% hint style="success" %} 構造図をアップロード {% endhint %} {% hint style="danger" %} 構造図をアップロードする {% endhint %} ## モバイルアプリの画面タイトルは、目的を要約する単語もしくはフレーズで端的に表現する。 画面が小さいこともあり、出来る限り簡潔に表現します。長くても10文字以下が理想的です。 {% hint style="success" %} 表示項目 {% endhint %} {% hint style="danger" %} 表示項目を設定します。 {% endhint %} ## 日付と時間の表記はYYYY/MM/DD HH:MM:SS Dateデータの表記については、他社サービスでも一般的に広く使われている「YYYY/MM/DD」で表記します。 {% hint style="info" %} YYYY：西暦年4桁 MM：2桁の月 DD：2桁の日 {% endhint %} 時刻（time）の文字列形式は、HH:MMで表記します。日付とは半角スペースで繋ぎます。 {% hint style="info" %} HH：24時間制の2桁 MM：2桁の分 SS：2桁の秒 {% endhint %} ## 「日付(YYYY/MM/DD)」「日時（YYYY/MM/DD HH:MM:SS)」「日時（YYYY/MM/DD HH:MM）」の表示を適切に使い分ける
使う場面 例
日付(YYYY/MM/DD)日付だけわかれば問題がない時。一般ユーザーの操作で生成されるデータに対しては原則使わない。プロジェクト作成日。竣工日。
日時(YYYY/MM/DD HH:MM）理由がない限りメインで使用する。書類作成日時。最終ログイン日時。
日時(YYYY/MM/DD HH:MM:SS)1分の間で頻繁に生成されるデータに対して利用する。写真の撮影日時。顧客に提供するログ。検査日時など。
## ディスクリプションは敬体（ですます調）を用いて動詞まで記載する。加えて「！」「？」などは使わない。 機能の説明文は必ず動詞まで記載します。体言止めなどは使わないでください。またユーザーに不安感を与えないように「！」や「？」は使わないでください。 {% hint style="success" %} 操作は元に戻せないためご注意ください。 {% endhint %} {% hint style="danger" %} 操作は元に戻すことができません！よろしいですか？ {% endhint %} ## ダウンロードできるファイル名称でユーザー側で決められないものに関しては本日の日付（YYYYMMDD）+「\_」+ 名称で表す。 ユーザーがタイトルなどを決められるものをダウンロードする場合は、日付など余分なものを付与せずに、ユーザーが決めた内容をそのままファイル名として活用してください。一方で、ユーザーで名称を決められないものに関しては、ダウンロードした日付と名称（出来るだけユーザに内容が伝わる工夫をする）を半角のアンダーバーで繋いだものをファイル名としてください ## 小数点は可能な限り使わず切り捨てる 厳密に表そうと思えばいくらでも可能であるものの、直感的かつ視認性を考慮して小数点以下は切り捨てます（注：四捨五入ではなく切り捨て）。ただし面積や体積など、精度が求めらたり小数点以下で表すことに特別な意味があるものは除きます。 {% hint style="success" %} 97% {% endhint %} {% hint style="danger" %} 97.5% {% endhint %} ## 画面を移動するアクションのリンクは具体的な対象なら「に」、相対的な位置なら「へ」を使う。 可能な限り場所を明示し助詞は「に」を使います。 省略できる場合は、相対的な位置を示す「へ」を使います。なお、視認性を考慮して「図面一覧」などは「一覧」と表現します。 {% hint style="success" %} 一覧に戻る {% endhint %} {% hint style="danger" %} 図面一覧へ戻る {% endhint %} {% hint style="success" %} 前へ戻る {% endhint %} {% hint style="danger" %} 前に戻る {% endhint %} ## 「以下の内容に」や「こちら」といった場所を表す言葉は使わない 抽象的な言葉であり相対的な場所を表すような「以下の内容に」や「こちら」と言った表現は避けましょう。 {% hint style="success" %} ヘルプページを参照する {% endhint %} {% hint style="danger" %} ヘルプページはこちらを参照してください。 {% endhint %} ## ユーザー名称を表すときは性と名を合わせたフルネームとして、間に半角スペースを入れる。 プロダクトの中でユーザー名称を表示するときはフルネームかつ半角スペースを間に入れて表現します。また、前後に文書を入れる時にも接続に半角スペースを入れてください {% hint style="success" %} 削除すると 中島 貴春 さんのデータは消去されます。 {% endhint %} {% hint style="danger" %} 削除すると中島貴春さんのデータは消去されます {% endhint %} ## 文書をラベルとして使うときは全角の「：」を使う 鉤括弧などはスペースを多く使うのに対して全角の「：」は非常に視認性も高くコンパクトに表現することが可能です。 {% hint style="success" %} 撮影日時：2023/4/23 12:10:23 {% endhint %} {% hint style="danger" %} （撮影日時）2023/4/23 12:10:23 {% endhint %} ## 文書でステータスや詳細を表すときは「()」を使う。手前に半角スペースと末尾に配置する 文書自体のステータスや詳細は備考的な要素が含まれるので必ず末尾に、視認性を考慮して半角スペースで繋ぎます。 {% hint style="success" %} すべての写真 (200) {% endhint %} {% hint style="danger" %} すべての写真 \[200] {% endhint %} ## 「追加」「登録」「作成」「保存」を適切に使い分ける
使う場面 例
追加見えているものにデータを追加する場合写真一覧に写真データを追加する場合のアクションボタン
登録帳簿など元になるものを登録する場合ユーザーの登録時のボタン
作成ユーザーが入力した情報を元に何かを生成する場合写真を選んで書類を作成する時のボタン
保存今あるものの情報を編集する場合組織情報などの保存するボタン
## 3桁以上の数字には、カンマ（ , ）を入れる 視認性を考慮して、3桁以上の数値を表記する場合は「,」を入れます。ただしIDなど意味のない数字を列挙する場合は別となります。 {% hint style="success" %} 1,000枚 {% endhint %} {% hint style="danger" %} 1000枚 {% endhint %} ## ステップで操作が進む場合は「次へ」「戻る」を使う 例えば書類を作成する場合、最後の操作するボタンは「作成」になりますが、それまでにステップが必要な場合は「次へ」「戻る」を使います。 ## 強調したい場合は前後に半角スペースを入れた “ “ で囲う 文書の中で特に強調したい場合は前後に半角スペースを入れたダブルクオーテーションでくくる。「」は『』などはスペースを取るため使用しない {% hint style="success" %} 利用する場合は “書類” に移動してください {% endhint %} {% hint style="danger" %} 利用する場合は「書類」に移動してください {% endhint %} ## ソート表現は「並び替え」で統一する 「並べ替え」は「レイアウト変更」や「グループ分け」のニュアンスが強いため、ソート機能を指す場合は 「並び替え」 を使用する。 {% hint style="success" %} 昇順に並び替え {% endhint %} {% hint style="danger" %} 昇順に並べ替え {% endhint %} 　 # メール システムから飛ぶメールに関するテキストについて定めています。 ## 差出人は必ず “Photoruction” の文字を入れる。特別何かを記載したい場合は(半角スペース) +「 | 」+ (半角スペース) + (単語) で表現する {% hint style="success" %} Photoruction | BPOサポート {% endhint %} {% hint style="danger" %} BPOサポート {% endhint %} ## 件名は受け取った相手が次に何かするのか、イメージできるよう簡潔に書く。会社やプロジェクト名称を記載する場合は(半角スペース) +「 | 」+ (半角スペース) + (情報) で表現する メールは通知としての役割になるため、件名はそれだけを見てどのような内容なのか、短文でわかりやすく書くのが望ましいです。 {% hint style="success" %} 現場の写真が共有されました | （仮称）一丁目一番地計画 {% endhint %} {% hint style="danger" %} 写真の共有 {% endhint %} ## 本文は何を伝えたいか、どういった行動を取れば良いのか分かりやすく簡潔に書く 本文には「何の通知か」「次に何をすれば良いか」が冗長な表現なく伝わるように記載します。 ## フッターは固定の内容を入れる > ───────────────────────────────\ > このメールはPhotoructionからの自動送信のため、ご返信いただいても回答することができません。\ > ご不明な点がございましたら、貴社のPhotoruction管理者もしくは以下にお問い合わせください。\ > \ > 株式会社フォトラクション お客様サポート\ > メール：\ > 電話：03-6774-8687（9:00〜18:00 土日祝日を除く) # DESIGN PATTERN デザインパターン プロダクト内で繰り返しや同一の操作を行う場合は直感的に同じような操作感になるようパターンを用意しています。 # サイドパネル ## 可変型サイドパネル 可変型のサイドパネル (データファインダー)では最小幅を300px、最大幅を480pxとする。\ ユーザーが操作可能な領域は12pxとする。
## データファインダー * フォルダ階層が分かるように小階層にインデントを付ける。 * 親階層はアコーディオン形式で開閉できるようにする。 * データ数の表記は最大6桁を想定とし、仮に7桁以上になる場合はテキストの領域を狭め、データ数は隠さずすべて表示する。 * テキストが表示領域に収まらない場合、省略表示(...)にする (データの桁数が増えた場合は表示可能なテキスト数を減らす)
# CONSTRUCTION BPO オーダーボード 利用者が建設BPOを迷わず効果的に使うことができるよう、品質を統一するための方針を示しています。 ## オーダーボードだけで説明を行い、ヘルプモーダルには補足となる情報だけを記載する 原則オーダーボードだけを見ればわかるように説明文などをしっかり記載する。例外時やユーザーが迷いそうなポイントを補足する情報がある場合のみヘルプモーダルを活用する。 ## 「リスト選択」は最も一般的なケースをデフォルトの選択とする 該当のメニューにおいてデフォルトの選択が最も一般的になるようにします。 ## オーダーボードの順番は内容を理解しやすいよう、影響範囲が大きいと想定される順番にする 黒板を作成するメニューであれば最初に黒板を選ぶようにしたり、図面がないと何も出来ないメニューであれば最初の方でアップロードしてもらいます。先にわかると後から何故そのオーダーボードがあるのか、分かりやすい順番にしましょう。 ## 対話しているような表現になる言葉は極力避ける ユーザーが利用しているのはシステムの画面であることから、対話しているような表現になる言葉は極力避けましょう。例えば "貴社" や "当社" などが該当します。 ## メニューのタイトルやオーダーボードには同一の固有名詞は同じものを必ず利用する。 一般的なUIとは異なり、専門用語や独自表現を用いた説明が必要になるが、同じものを示す場合は必ず同じ固有名詞を活用しましょう。 ## 入力の時点で内容を想定できないものオーダーボードは不要と判断する。 例えば「その他」などの項目は入力される内容がわからないケースがあります。その場合は項目自体を不要と判断して思い切って削除してしまいましょう。 ## メニューの詳細説明は「成果物の内容」および「アウトソーシングできる作業内容」の2点は必ず含まれるようにする。 オーダーボードは説明を受けずとも、利用する中でわかりやすく使えるようにするのが望ましい。そのため、メニュー詳細では、ビジネスプロセスを実行したいユーザーが欲しい情報を簡潔に伝える。 # TOOLS ツールズ Photoructionのデザインシステムを推進し普及するための各種ツールを紹介しています。
ビジュアル表現/pages/o9oD9i2U6dSMM17zGGQY
PoweerPoint/pages/WUFbieR7wbVNk4eqUILB
Zoom/pages/X3SEIWPPpZW3H7ofcNyp
Slack/pages/HyW0Czk0MlruM6wwcJ1V
Mac
Desktop Picture
# ビジュアル表現 フォトラクションらしい「スマートさ」を印象づける表現を行います。 ## Double Ring
フォトラクションのロゴは象徴的な大小２つの円で構成されています。この２つの円をクリエイティブに用いることでフォトラクションブランドの世界観を表現することができます。尚、この要素がロゴの代わりとなることはないのでロゴや社名と合わせて使用するようにしてください。 ## グラフィック展開例
## 禁止表現 下記画像のようなグラフィック表現はフォトラクションの目指す世界観とは真逆のものであり著しくブランドを棄損する恐れがあるためいついかなる状況においてもこれらの表現をしないように心がけてください。
要素数の多い装飾的な表現/files/fl36M7IAETktSka5ef56
黒の比率が高く近寄りがたい表現/files/nik39NPEhU4s8gSt6eDD
ポップで子供っぽさを感じる表現/files/P58f7ZHAU963lHZ6ALCt
華やかでキラキラしている表現/files/zbrSU8Hlhyt4HKtKi35j
無機質な表現/files/eUmPdrR13V8cOhK4bzOw
極端に未来的な表現/files/mEM1i9fBD2KJQAhN2A3Z
# PowerPoint パワーポイントのテンプレートを配布しています。ご自身のデバイスにダウンロードしてご使用ください。
ダウンロードhttps://photoruction.box.com/s/8trfk3xvsqokt0t0nsj6iumviw4c4ar7
テンプレートに設定されているカラーパレットを使うことで簡単にフォトラクションらしい統一感のある資料を作成することができます。
基本的には黒と青をメインカラーとして使用し、注意喚起させたい要素には赤を使います。
# Zoom テレビ会議の背景ファイルを利用できます。
ダウンロードhttps://photoruction.box.com/s/a2bkttr36g06gms6eklv45zu9y1p34z1
# Slack カラーコードをslackのサイドバーテーマとして設定することでフォトラクションらしい見た目に変更することができます {% hint style="info" %} **#F5F6F7** **#000000** **#CDD1D9** **#031A43** **#E6E8EC** **#031A43** **#17A5FF** **#F34A68** **#027FFF** **#FFFFFF** {% endhint %} # Mac macにカラーパレットを保存しておくことでkeynoteや画像マークアップの際にPhotoructionのカラーが利用可能です。
ダウンロードhttps://photoruction.box.com/s/okb1qsd4tez1w8bx9mutqxaofr19laf8
## 使い方 ①上記ボタンから「photoruction color.clr」をダウンロード ②Finder のメニューバーから「移動」→「ライブラリ」を選択
③「ライブラリ」フォルダ内にある「Colors」フォルダの中に「photoruction color.clr」を格納
④任意の画像を開きマークアップモードにした上で「カラーパネルを表示」します。
# Desktop Picture フォトラクションVIのデスクトップ背景です。社用PCの背景画像などにどうぞ。
ダウンロードhttps://photoruction.box.com/s/y3astqruskb6111y2q5d0zuhvdcjeoqe