16種類の新デザイン

デザイン(デザイン雛形)を16種類追加しました。
2017年10月以来2年ぶりの追加です。
ここでは、追加したデザインの特徴と、デザインの切替方法について説明します。

追加したデザイン一覧

デザインの特徴と利用例

今回のデザイン雛形の特徴は以下の3点です。

≡メニュー

「≡」アイコンでメニューを隠すレイアウトを追加しました。
これまではスマホでメニューを常時表示するか、「≡メニュー」ボタンを押した際に表示するかを選べました。
今回追加したほとんどのデザインでは、スマホ表示時に「≡」表示が必須となります。
このうちいくつかのデザインでは、PCでも「≡」メニューが表示され、常にメニューが隠れます(下記)。

スクロール追従メニュー

PCで閲覧時、画面のスクロールに応じ、メニューが上部に貼り付いて追従するレイアウトを追加しました。
メニュー位置までスクロールする前は固定、スクロールが達してから追従します。
このレイアウトは、最近よく見かけることがあるため、流行のレイアウトと言えるかもしれません。
閲覧時にストレスを感じないよう、なるべくメニューの高さは抑え、スマホでの閲覧時は「≡」に切り替わる仕様で、滑らかな動作を心がけて設計しました。
固定⇔追従の切り替わり時にちょっとしたアニメーションが設定されています。

ほとんどが下地色

まめわざのデザイン雛形は、下地色の他に2色を配色できるのが特徴です。
その2色を下地色と同色にして1色のみを利用する利用者の方がおられることから、2色の利用箇所を減らし、下地色中心のデザインを追加しました。
これにより、非常にスッキリとした見た目になり、設置する画像や動画をより目立たせる効果が期待できます。

利用例

いつもの横幅・境界・色のバリエーション

それぞれのデザインは、コンテンツ部分の横幅のバリエーションがそれぞれ3つずつあります。
横幅は見た目にも大きな影響がありますので、レイアウトの実質の選択肢としては、16×横幅バリエーション3=48通りと言えます。

それぞれのデザインには、「ステッチ」「紙」「ギザギザ」など境界が微妙に異なる境界バリエーションが10通りずつあります。
境界を含めた選択した48×10=480通りとなります。

他のデザイン同様、デザインは3つの色で着色可能です。色の選択肢は1色あたり1,677万色のフルカラーなので、膨大な組み合わせからオンリーワンの配色が選べます。
また、各配色には画像も設定できるので、まさに無限の表現が可能です。

ステッチ
古地図
ビスケット
トゲトゲ
ギザギザ
手書き風

新しいデザインを使う

まめわざでは、ホームページ作成後でもデザインをに変更できます。
もちろん作成済みのページ内容が損なわれることはありません。


デザインは、無制限に複数キープすることが可能なので、現在のデザインは残しつつ、新しいデザインをお試しいただけます。
例えばヘッダー部分が狭いデザインと広いデザインとがあるため、作成済みの内容にあったデザインを探して着せ替えをしてみましょう。

デザインの編集手順

管理用サイトのトップページでデザイン欄の「編集」ボタンをクリックしてデザイン編集画面に移行します。

スマホでのご利用時はフルモードへ切り替えた上で、設定ボタンの右の小さな矢印ボタンを押して「デザイン」ボタンを表示させてください。

デザイン編集画面では、左側に設定項目、右側でプレビューが表示され、右側で表示確認をしながら左側で設定します。

上部に「パパっとデザイン」「もっとデザイン」のタブが表示されます。この「もっとデザイン」を押します。

「もっとデザイン」での上部の「雛形の選択」欄でデザインの雛形を選べます。
新しい16種類のデザインは、上から順に配置されています(鉄道の写真が目印です)。
ここでひな形を選び(押し)、必要に応じてバリエーション(境界)と横幅を選びます。

他には3つの色・文字色・ページ移動時のアクションが選べます。

雛形を選択後、下部の「保存」ボタンを押すとデザインを適用&保存できます。
「上書き」のチェックを外して保存すると、デザインを複数保存できます。
保存したデザインは、同じくデザイン編集時に、「パパっとデザイン」に表示される「保存済みデザインを選択」から選択し、保存ボタンを押すと適用されます。

2019/10/7