デザイン雛形を追加&横幅のバリエーションが登場

まめわざでは、デザインの雛形を選ぶだけで、いつでも何度でもレイアウト(ページ内の配置)が変えられます。
このたび、デザインの雛形を追加して計38種類となり、また横幅が選べるようになったことで、バリエーションを含めた総計が652種類となりました。
ここでは新しいデザイン雛形と横幅のバリエーションを紹介します。

新しいデザイン雛形

2017年10月追加分

「タイトル(ヘッダー)」と「メニュー」が並列
並列の「タイトル(ヘッダー)」と「メニュー」が上部に固定
「タイトル(ヘッダー)」と「サイド」が左側に固定
「タイトル(ヘッダー)」と「サイド」が左側に固定

2017年2月追加分

下地色以外にあまり色を使わない配色で、スッキリとしたレイアウト
下地色以外にあまり色を使わない配色で、狭めのレイアウト
メニュー部分にのみ色を使った配色で、スッキリとしたレイアウト

横幅のバリエーション

10月に追加した4つのデザインと、既に提供している10のデザインで横幅が選べるようになりました。
横幅のバリエーションは基本的に「標準」「大」「最大」が3つがあります(一部例外あり)。
「標準」ではウィンドウ幅によらず一部の最大横幅が1,000px前後に固定されていますが、「大」ではウィンドウ幅の80%、「最大」ではウィンドウ幅いっぱいにまで広がります。
次の例のようにデザインの表情が大きく変わります。

標準
最大

横幅のバリエーションの選び方

まめわざ登録時の登録ページと登録後のデザイン設定ページで、デザインの雛形を選ぶ際に「横幅(PC表示時)」欄が表示されます。
これがないものは、現在のところ横幅のバリエーションがありません(今後増やしていく予定です)。

デザインの組み合わせの理論値

まめわざのデザイン雛形は、横幅・境界のバリエーションがあり、それぞれ3パターンに着色できるのが特徴です。
以下のように豊富なバリエーションの理論値を誇り、実際に下記のデザインシミュレータでは、億単位のパターンからお選びいただけます。

組み合わせ数
デザイン雛形の数38
+横幅のバリエーションを含めた場合67
+境界のバリエーションを含めた場合652
+256色で2箇所を塗る場合(下地は白)4,273万
+下地も256色で塗る場合109億
+65,536色で塗る場合1.8京(兆の1万倍)
+模様をつける場合1.6垓(京の1万倍)

ほぼ無限の組み合わせから選べるので、世界で1つだけのデザインが作れます。

デザインの選び方と注意点

まめわざ登録時

まめわざへの登録は、下記のデザインシミュレータの「無料登録ページへ」ボタンから登録用ページに移動して行います。
デザインシミュレータでも、その後の登録用ページでも、同じようにデザインが設定できます。参考手順は以下です。

  • まずは、「ランダムモード」で大まかなデザインを決めます。
    「1.雰囲気の傾向」「2.色の傾向」をご希望に合わせて選択し、「デザイン切替」ボタンを繰り返し押してお気に入りのデザインを探します
  • 気に入ったデザインが見つかったら、「無料登録ページへ」を押します。

さらに、「詳細設定モード」を選ぶと、デザイン雛形・画像・色を手動で調整できます。

まめわざ登録後

まめわざ登録後は、デザイン編集ページでデザインを設定できます。

右側のプレビュー欄でデザインの仕上がりを確認しながら左側で設定します。
設定欄では、上部のタブで「パパっとデザイン」と「もっとデザイン」を選べます。
「パパっとデザイン」では、まめわざ登録時のシミュレータのようにランダムで設定ができます。
「もっとデザイン」では、デザイン雛形・色・模様・文字色の他、文字のサイズやページ移動時のアクションも設定できます。

注意点

まめわざ登録後にも、デザインを手軽に変更可能です。しかし、まめわざ登録時のデザインとの違いによって違和感が出るケースがあります。以下、気をつけるべきポイントを解説します。

ヘッダーの背景に画像を設置している場合

豆技登録時に、「雰囲気の傾向」で「デラックス(画像が主役)」を選んだ場合、サイト名の下に画像が表示されます。
このデザインを選んだ場合、メインの画像は「メイン画像エリア」ではなく「ヘッダー・ロゴ」に挿入されます。
このデザインから別のデザインに変更する場合は、「ヘッダー・ロゴ」部分のレイアウトによっては意図しないデザインになるので注意しましょう。
この場合は、不適当なデザインを選ばないか、「サイト名・ロゴ」ブロックの背面の装飾をリセットしてご利用ください。

ヘッダーが狭いパターンの場合

「ヘッダー・ロゴ」の横幅はデザインによって異なります。
横幅が広い場合は、サイト名のほかに、共有ボタンや言語切替などが並列に配置される場合があります。
この並列状態で、「ヘッダー・ロゴ」部分が狭いデザインに変更すると、並列ブロックの横幅が狭くなり、不自然な表示になるので注意しましょう。
この場合は、並列になっているブロックを削除するか、縦列の位置に移動してご利用ください。

デザインシミュレータ

上記の説明をご覧の上でご利用願います。

2017/10/25