TOKYO」の使い方BASEで会員登録した後にBASEデザインマーケットで購入し、管理画面「デザイン」からテーマを選択して適用します。デザイン編集で設定できる項目の内容については特設サイトがありますのでそちらをご覧ください。TOKYO」特設サイトまた、すでにBASE会員の方はデザインマーケットで詳細ページの「プレビュー」ボタンから実際のデザイン編集画面を使用して変更をプレビューできます。購入前に一度お試しください。TOKYO」のおすすめポイントテーマの使い方や紹介については特設サイトを見たり、プレビュー画面で設定してみたりして試していただくと良いかと思います。ラグジュアリー感があるワインをテーマにデモデザインを起こしたため、過去の3つのテーマと比較すると高級感があるテーマになったと思います。TOPページデモデザインスクロールするとふわっと表示するアニメーションを付けたり、商品一覧やブログをマウスオンする時のホバーエフェクトもちょっと工夫してみたりしました。全体的にカッチリしたデザインになっているので、さらに高級感を出したい場合は明朝体のフォントが非常に合うと思います。デフォルトで明朝体になっていますが、フォントは選択できますのでお試しください。テーマカラー変更が簡単デフォルトは白基調のデザインですが、10個の項目で各所の色を変更できます。背景サイドメニュー・見出し:背景色サイドメニュー・見出し:文字色テキストカラーリンクカラーポイントカラー(ボタン背景などの装飾部分背景)ボタンテキストカラーセールカラー(SALE商品の価格文字色や割引タグの背景色)セールタグテキストカラー(割引タグの文字色)ダークモードのようなテーマも簡単に設定できます。左がデフォルト、右がカスタマイズしたダークモード風カラーテーマカラーのカスタマイズのコツとしては、「背景色と文字色の視認性を保つ」ことです。全体の背景色やサイドメニューの背景色を変更した時は、テキストが見にくくなっていないかを確認して、テキストの色も調整してあげると見やすいサイトになります。不要なエリアを非表示にすればミニマルなサイトにもできるメインビジュアルやニュース、ピックアップなどのエリアは非表示にできるので、シンプルに商品一覧だけを表示させることもできます。メイン画像やピックアップなどを非表示にして商品一覧を目立たせるメイン画像にするような画像がない!っていう場合でも普通にかっちりとした綺麗なレイアウトなのでサイトの見栄えが悪くなったりしないと思います。クーポンバナーが活用できる今回新しい機能として「クーポンバナー」を追加しました。「クーポンバナー」はヘッダーの下にバー形式で画像もしくは入力したテキストを表示できるバナーエリアです。「クーポンバナー」という名前は、BASEのAppにある「クーポンApp」で発行したクーポンコードを表示するためのバナーとして作ったからこんな名前になりました。クーポンバナーでキャンペーンをアピール!これが割と使えます!BASEで何かキャンペーンをするとしてクーポンAppを使う際、発行されたクーポンコードをサイト内で記載する場所って案外ないんですよね。メイン画像に埋め込むのもなんか違う気がするし、Aboutページのショップ説明に書いてもあまり意味なさそうですし。いって商品ページに商品ごとに書いてキャンペーンが終わったら消す、なんて商品数が多いとできません。それをこの「クーポンバナー」でシンプルに解決します!単に「キャッチコピー」と「クーポンコード」をセットで設定できるだけなのですが、全ページに共通して表示できる上に、目立つ色やフォントにも変更できますので「キャンペーン感」がめっちゃ出せます。フォントも変更可能もちろんクーポンコードなしでキャッチコピーだけを表示しても使えます。独自の画像をデザインして埋め込むこともできますし、「キャンペーンやってます感」をサイトに出すのにすごく便利です。TOKYOを購入した際はぜひお試しください。ちなみに他の有料テーマでも「フリースペース」みたいな感じでテキストやリンクを自由に書けるエリアはよくありますが、今回のようなキャンペーンバナー的な役割で特にクーポンコードに特化した機能はないんじゃないかと思います。ABOUTなどの下層ページのメインビジュアルが設置できるABOUT・BLOG・商品一覧ページのメイン画像が設置できます。ABOUTページにメイン画像を設置タイトルの文字部分にアニメーションをかけているのですが、その背景として設置する形になります。黒いフィルターがかかるような表現になりますが、画像を設置することで立体感が出てよりリッチな見栄えになります。当然ですが、全ページどのデバイスでも問題なく動作しますので、スマホでもラグジュアリー感のあるリッチなデザインを維持できます。ロゴのサイズやTOPページのスライドの画像サイズもスマホ用とPC用で個別に分けることができるので、よりスマホに合ったデザインにカスタマイズ可能です。以上が開発者的に自信を持っておすすめできるポイントです!カスタマイズのポイントカスタマイズ性が高いのでけっこう自由が効くのですが、その分やろうと思えばめちゃくちゃにもできてしまいます。笑せっかく有料で買ったのにガタガタなページになると勿体無いのですよね。何点かここだけはしっかりルール化しておいた方がより見栄えをよく保てるよ!っていうポイントがあるので書いておきます。1、画像のサイズこちらのテーマはご自身で用意する画像がけっこう多いです。商品画像はもちろんですが、メイン画像やピックアップ、バナーなどですね。その際に同じエリアの画像は大きさを揃えておくということがサイトを綺麗に保つ重要なポイントのひとつになります。TOPのメインビジュアルのスライドを例に説明します。画像の推奨サイズはPCが横2480×縦1196(px)です。これに合わせて作っていると綺麗に表示されますが、そうでなく小さい画像を設定した場合は画像が引き伸ばされて荒くなったり、画像のタテヨコ比(アスペクト比)が違う場合は変な感じに位置調整されてしまう場合があります。「1枚目と2枚目で大きさが違う」といったこともなるべくない方が綺麗に見えますね。これは商品画像やバナー・ブログの画像も同じです。最初に画像を設定する時に綺麗に収まる画像を用意しておき、常にそれと同じサイズのものを追加したり更新したりすることでサイト全体を綺麗に保つことができます。一覧で見た時に商品やブログ画像の大きさや縦横比がバラバラになっているより、ビシッと同じサイズで揃っている方が印象もよくなりますよね。2、配色こちらのテーマは10個の項目で各所の色が変更できるのですが、よっぽど商品と合わない時以外はデフォルトのままお使いいただくことがオススメです。変更するとしても「ポイントカラー」や「セールカラー」といったアクセントになる部分の配色くらいで良いと思います。Webデザインの話になりますが、よく言われるのが配色の基本は「3色」です。それ以上使うとまとまりのない雑多な感じになりがちですし、目立たせたいポイントがわからないサイトになってしまう可能性もあります。日常に近いところでいうと、服装を考える時も同じです。色を入れすぎるとよっぽどセンスがないと落ち着きがない感じになりがちです。3色ぐらいがバランスがもっとも良いし初心者にも優しいです。「いやいや!そう言いつつデフォルトでも3色以上使っているやん!」とツッコまれそうですが、コントラストを変えながら実質使っている色は4色ほどですし、デザインしているのはプロのデザイナーですので配色のバランスもよく考えられています。(僕がデザインしているわけではありません)配色に自信がない方はあまり考えずにとりあえずそのままお使いください!商品画像などにかならず色が入ると思うので、それがちょうど目立っていい感じに華やかなサイトになるはずです。3、ロゴは横長こちらのテーマは横長のロゴを強く推奨しております!というのも、こちらを見比べていただくとわかりやすいです。縦693(px)の画像を設定してみました。このように縦長のロゴを入れてもヘッダーの大きさは変わらない仕様のため、縦長のロゴは縮小されてしまいます。そのため横長のオーソドックスなロゴを設定することをおすすめします。画像が用意できない方はBASEの機能でロゴ画像を作ることもできますし、デザイン編集画面でテキストロゴでも設定できます。色・字体・大きさも調整できるので、簡単に設定したい方はそういった作り方も可能です。TOKYOの潜在能力を活かせるよ!っていう3つのポイントを紹介しました。・・・けっこうWeb制作者目線の偏った意見なので、しっくりこない方は意見は意見として良いと思うデザインを貫いてください。TOKYOはあなたの味方です。TOKYO」をよろしくお願いします!ちなみに弊社で販売しているテーマの中では「camera」が1番売れています。数でいうと累計100個は超えました。たくさんのショップオーナーの方々に使ってもらえて非常にありがたいです。その中でいろいろとご質問やカスタマイズについてのお問い合わせも多くなってきましたので、機会があればこのブログでコメントを解放してカスタマイズFAQ的なことをやってもいいかなぁとぼやーっと思っています。(あまり確度は高くないです。