帳票設計と色の設定

  • 作成者:ayuan0625
  • 編集回数:20次
  • 最終更新:FRInternational 于 2021-11-26
  • 一.色を選ぶ

    1.デザイナから色を選ぶ

    背景の右側の小さい三角形をクリックし、その他の色をクリックしてカスタムのオプションカードをクリックします。下の図に示すように、ここのHSB或いはRGB値はお望みの精確な色です。

     

    RGBはモニター画面に適用するカラーモードだが、人間にとって直感的に捉えられる色ではありません。人間が通常「どんな色なのか、鮮やかなのかどうか、明るいかくらいか」という感じで色を識別してので、それに基づいてデザインされたHSLモードとHSV(HSB) モードがお勧めです。

    HSLは即ち、色相、飽和度、輝度(Hue、Saturation、Lightness)を指します。HSVは即ち、色相、飽和度、明度(Hue、Saturation、Value)を指します。HSBとも言われ、その中でBは英語の「Brightness」を意味します。

    色相(H)は色彩の基本的な属性で、例えば、赤色、黄色など、つまり一般的によく言われる色の名前です。

    飽和度(S)は色の純度を指し、高いほど色は純粋になり、低くなると段々灰色に変わっていきます。値は0-100%の数値を取ります。

    明度(V)、輝度(L)も0-100%の値を取ります。

    備考:Microsoft 社の Office シリーズは HSL を使用し、Photoshopなどは HSB を使用しています。FineReport デザイナ 7.11 および以前のバージョンはHSBを使用し、8.0バージョンはHSLを使用しています。

    2.ペイントで色を選ぶ

    お気に入りのテーブルや配色を見つけた場合、ペイントで詳細な色の値を取得することができます。その方法は次の通りです。

    キーボード上のスクリーンショットキーであるPRTSCキーを使います。使い方:PRTSCキーを押してから、Windowsアクセサリからシステムに搭載されたペイント(これは例示であり、その他のツールも利用可)を開き、 Ctrl+Vを押すと次の画面が表示されます。

     

    カラーピッカーをクリックし、画面から必要な色の位置を選択し、カラー編集をクリックすると、カラー編集のメニューが表示されます。詳細なRGU値を見れば必要なRGBが分かります。

    3.デザイナから直接色を選ぶ

    新しいバージョンはデザイナから直接色を選ぶ機能を追加しました。詳しくは次の通りになります。

     

    4.推薦カラー

    備考:以下は全てHSBカラー設定になります。

     

    二.テーブル

    1. テーブルの線はあまり濃い色を使用しせず、特に縦線には濃い色を避けましょう。横線も若干薄い色を使用しましょう。

    2. 表タイトルの色はテーブル本体の色より目立つようにしましょう。

    3. テーブル本体にMicrosoft YaHei或いは黒体フォントを使うと、太字に設定することもでき、いい効果を出すことができます。

    4. テーブルのデータは整列し、セルの間隔を適切に設定しましょう。整列する時、金額や数字を比較する必要がある場合、出来るだけ右揃えに設定し、通常は中央揃えに設定します。

    5. テーブルの枠をうまく利用すると、立体感を強調してより素晴らしい効果を得ることができます(立体感のあるチャートは通常グレー、ライトグレー、シルバー色を使用します)  

    6. タイトルの位置に気を付けましょう。中央、左、右揃えではそれぞれ異なる効果があります。

    7. 欧米風のチャートはグレー、ブルー、ダークレッドを組合せて使用することが多く、行と行の間は同じ色調に濃淡を付けて区分し、あまり枠線を使用しません。

    8. 表タイトルに小さいアイコンを追加するのもいいでしょう。出来れば表タイトルや表の終わりの部分に背景画像を追加しましょう。

    次は一部の表の例になります。

    例一:

    例二:

     

    例三:

     

    三.チャート(PC端末)

    1.テクニック1

    FRデザイナのチャートは、既定配色(比較的に濃い色調)を使用するため、縦棒グラフや円グラフはなるべくグラデーションを使用してください。自分で配色する場合、若干薄い色を選択し、あまり目立たないようにしましょう。選択できる色:ブルー、グレー、ダークレッド(鮮やかな赤ではない)、オレンジ、グリーン。ただし、色はあまり明るすぎないようにしましょう。また、色はなるべく濃淡をつけて組合せて使用しましょう。

    この位置から一早く必要な色を取得することができます。

    a.グレーの場合: Sを選択

     

    b.その他の色の場合: Bを選択

     

    2.テクニック2

    チャートをデザインする時、フローティング要素を使用すると多くの効果を出せなくなるため、できるだけフローティング要素を使用しないようにしましょう。

    3.テクニック3

    チャートエリアの丸角枠をうまく利用すると、いい効果を出すことができます。凡例の位置について、通常の高さの帳票なら凡例を右側に、比較的に高い帳票なら上、または下側に凡例を表示させます。

     

    4.テクニック4

    チャートの背景色はとても大事です。うまく利用すれば、予想よりもよい効果を得ることができます。背景色だけでも、一行おきに色を付けたりグラデーションを設定したりすると、一味違うイメージを出すことができます。

    5.テクニック5

    チャートのレイアウトは非常に重要で、出来るだけ整然に並べた方がいいでしょう。丸のある所に適度に四角を取り入れ、四角い所にも丸を入れるといいでしょう。全てのチャートを一緒に並べた時に、乱雑に見えては行けません。

     

    6.テクニック6

    現在チャートのスタイルはますます大衆的になり、Windows のような大ブロックのカラーが良く使われています。色は、Microsoft 社のロゴのように、なるべく明るい色を選びましょう。

     

    7.テクニック7

     

    適切なチャートを選択しましょう。折れ線グラフ、面グラフ、縦棒グラフなど、二次元、三次元も色々と試しながら、補い合ってみましょう。アートデザインの原則は、たくさんのものを参考にし、色々と表示させてみて、ディテールにこだわることです。


    Attachment List


    Theme: FineReport 帳票実例
    既に最初
    既に最後
    • Helpful
    • Not helpful
    • Only read