2020に流行ったWebサイトのデザインをLightningとVK Blocksで再現してみよう Part3

前回の長文を読んでくださった方っているのでしょうか…。さてやっと本題です。

なるべく多くの方へのヒントになるように、一旦、Lightning（Pro） と VK Blocks （Pro）、そして追加CSSのみでの実装、という縛りで行きたいと思います。ちょびっとPro版を使っていますが、無料版でも他のテーマでも流用できるTIPSがあるのではないかと思います。普段の私の実装手順と全然違うのでソワソワしますが、兎も角やってみましょう！

またも長文になったので、オススメのTIPSへのアンカーをおいておきます！目次をOPENしても飛べます！

• しゅるっと動くボタンのCSS
• オンラインツールで完結するSVG画像のCSSインライン化
• 全幅のメディアと文章（テキスト）ブロックを使って今っぽくする
• 超おすすめ、Responsively！

なんだか3記事分ぐらいの内容を書いてしまった気がします…

まずは初期設定をしましょう

サーバーにWordPressをインストールして、Lightning ProとVK Blocks Proを入れておきましょう。

さて、今回のデザインだとLightningの初期設定は使わないので、オフにしていきます。

ホームページを固定ページに

固定ページを新しいページで作っても良いですが、私はよく「サンプルページ」を「HOME」に書き換えて使います。

そして、カスタマイズのホームページ設定からホームページの表示を固定ページにし、ホームページをHOMEに指定しましょう。

スライドをオフ

トップページの設定から、「スライドを非表示にする」にチェック。

PR Blockを非表示に

同じく、PR Blockを表示する、のチェックを外しましょう。

フッターを消します

フッターのウィジェット類も一旦全部消してしまっておきましょう。

テキスト情報と基本のブロックを配置していきます

さてココからコンテンツを入れていきます。

固定ページの「HOME」に戻って、ワイヤーを作るように必要な要素を置いて行きましょう。

ブロックエディタであろうが、クラシックエディタであろうが、HTMLの基本は変わりません。HTMLの構成を考えながらモバイル時の配置を基本に要素をブロックとして置いていきましょう。

Headingの順序を考慮するのを忘れずに。特にホームページ（トップページ）を組んでいるとsectionタグが使いたくなりますが、2020年12月現在はグループブロックで代用するのがベターだと思います。

全部のブロックを解説すると大変なので、ヒーローエリアのみ取り出して説明しますね。

デザインはこんな感じ。

ここは画像背景?だからカバーブロック?とか思ってしまいますが、先ず大事なのはコンテンツなのでテキストを拾って置いてみましょう。

ぱっとみた限り、「GIVE SHAPE〜」の文を見出し（h2）ブロック、リード文は通常のブロック（Pタグ）で配置します。その次に、2つのボタンはボタンブロック、でしょうか。

VK Blocksのボタンでアイコン付きボタンを簡単に実装

ボタンは矢印アイコンを簡単に付けるために、標準のものではなくVK Blocksのボタンブロックで実装すると簡単によく似たパーツが作成できます。

アイコン付きボタンを簡単に生成出来るのは、VK Blocks の良いところだなあと思います。

ボタンはモバイル幅では縦並び、PCでは横並びとなるので、2つをグループブロックで囲って、「高度な設定」 > 「追加CSSクラス」へ一意の名前を付けます。ここでは、 smpl01_buttons というclass名を付けています。

画像は一番下に配置

Figmaから女性の画像をPNG（x2）で書き出します。

書き出したらImageOptim や squoosh などを使って最適化しておきましょう。最適化したものをアップロードし、画像ブロックとして、ボタンのグループの下に配置しておきます。サイズはあとでCSSでいじる処なのでフルサイズでドーンで大丈夫です。

全部の要素をグループ化して全幅設定にする

配置したものを全部選択してグループ化したら、幅の設定を全幅設定にします。グループブロックの「高度な設定」 > 「追加CSSクラス」には smpl01_section--hero とします。

背景のグラデーションとVKロゴはCSSで実装しますので、ヒーローエリアはこれて一旦完了！

…という感じで、組んでいきます。

アコーディオンになっているセクションについては、ちょっと悩むところです。構造的にはあんまり良くないかもしれませんが、VK Blocksの新FAQブロックを使ってしまいましょう。

（参考サイトは2つのSolutionが提案出来ることが会社としての強みなので同じ構成のセクションでその2つを併記することと、コンテンツ量をアコーディオンで調整することで対比を見えやすくしてブランドのメッセージを出しているのだと思います。今回、デザインのトレースが主題なのでこのセクションをそのまま使ってみていますが、入れ替えてみたコンテンツとは合わなくなっているので、もし本当にクライアントがいる受託案件であれば、アコーディオンで隠すような要素をトップページに置く必要性についてクライアントと相談し、このセクション自体をトルツメしてしまうか、内容を再検討するか、他のページに移すか、などを提案するかと思います。基本的にアコーディオンという表現は避けて他の見せ方を考えるべきだと思います。）

アウトラインをチェック

ざっと要素を入れた処で、ページを更新して、アウトラインをチェックしましょう。

私がよく使うツールは HTML5 Outliner – Chrome Web Storeです。

つい欲張ったり、見た目に引っ張られたりして、見出しを使いすぎていないかチェックします。画像の時点だと1箇所気持ち悪かったので実際のページでは修正しています。デザイン上の要素の表示の大小を考慮するべき時もありますが、私は基本的にこうやって見出しにしてみて違和感がないかどうかを基準にしています。HTMLは良くも悪くもマークアップ言語です。こういったコンテンツでは最初に文書構造を整えておくのが、2021年でも常套手段であるままだと思います。

この時点で、見た目は全然参考サイトと違っていますが、ここからデザインを実装していきます。

ベースのデザインをカスタマイザーで設定しよう

まずはカスタマイザーで出来る範囲でベースのデザイン設定をしていきましょう。

背景、キーカラー、リンク文字色を設定し、見出しのデザインを全てプレーンにしておきます。

レイアウトを「1カラム（サブセクションなし）」として、ヘッダー上部設定で「ヘッダー上部エリアを表示しない」にチェックします。

CSSを書いていこう

さて、ではここからはCSSを書いて行きましょう！

CSSの書き方が分からない方はまず、弊社石川代表が書いたこちらの記事をご参照くださいね。↓神記事！

どこに書くか問題

石川さんの記事の中でもありますCSSをどこに書くのか問題、今回は子テーマや自作プラグインという手法は無しなので一番オススメながら却下です。EXUnitのカスタムCSSだと自動で圧縮してくれるので、今回はこちらを使ってみます。EXUnitをお使いで無い方は追加CSSで同様にできますのでお試しください。

そしてEXUnitであろうが追加CSSであろうが5行以上のCSSを書くなら、WordPress上で直書きせずに別途エディタを使うことをオススメします。回線状態やサーバーの状態、その他思わぬアクシデントでせっかく頑張って書いたCSSが消えてしまうのを防ぎましょう。

そんな時の保存先と編集先の候補として意外と良いかもなと思っているのが、CodePenです。WordPressが出したソースをHTMLとしてコピペして、CSSを書き足すことが出来ます。ただし、実際にクラウド保存先として使う場合はプロ版にしてプライベートで利用した方がいいでしょう。

本命は Visual Studio Code 等でローカルで編集しながら追加CSSへ随時アップして確認、FTPなどで該当サーバー上の任意ディレクトリに、custom-20201223.cssとかで保存しておくとかでしょうか。どうせ公開しているCSSなので誰に見られようが関係無いと思いますが、人に読まれて困るようなコメントは入れないようにはしましょう。

あとは、サイト自体に固定ページを非公開で作成して、コードブロックで貼り付けておいて簡易バックアップにしても良いかも知れません。こちらの方法は操作ミスで消えることもあると思います（まあどの方法もミスったら消えるんですけれど）が、追加CSSだけにしておくよりはリビジョンがあるので良いと思います。

リビジョンというと、JetpackのカスタムCSSのリビジョン機能を頼っても良いかも知れませんが、私自身はあんまり使ったことが無いので気になる方は自分で調べてみてください。
参考:カスタム CSS – Jetpack by WordPress.com

その他、Simple Custom CSS のようなプラグインもありますが、こちらの場合は、すでにEXUnitをお使いの皆さんは、EXUnitの機能を使うのが吉かと。

普段Sassを書き慣れている方は、
Online SCSS Compiler – BeautifyTools.com という選択肢もあるかもしれません。が、Sassを書くならもうローカル環境用意したほうが良いかなあと個人的には思います。

Web Fontの読み込み

Web Fontは今回、Google Fontを使うことにしましたので、以下のプラグインを利用してみました。

Fonts Plugin | Google Fonts Typography – WordPress plugin | WordPress.org

普段はちょいちょいっとfunctions.php的なところに書いてしまうので初めて使ってみましたが、Webフォントを使ってみたいけれど仕組みが良くわからない人にも使いやすくて良いのではないかな、と思います。

有料版だともっと多機能なので、より細かい指定が出来るみたいです。今回はこれで十分なのでこの指定で作成しました。

単位の話

さて、CSSの単位のお話です。デザインする時はpxで指定していますが、私は基本remに読み替えてしまいます（そして、部分的にemやpxを使います）。正直色々難しい事を考えるのが面倒なので、いつもはSassの関数を使って読み替えてしまっているのですが今回は手作業なのでPX to REM converter (instantly and bidirectional)などを使って変換していきました。

とはいえ、今回はバッチバチにスケール計算をしている訳でもない行き当たりばったりなコーディングで全部remにする必要もないので、font-size（とそれに関連する箇所）ぐらいかなと思います。主要ブラウザが賢い昨今、font-sizeも今や別にpxで良いのでは、とも思いますが、MDNに以下の記述が残っている限りはfont-sizeぐらいはrem指定にしておこうかな、という日和見主義です。

注: たくさんのユーザーが、テキストが読みやすくなるようユーザーエージェントの既定のフォントの大きさを拡大しています。絶対的な長さで指定すると、大きさが固定され、ユーザー設定によって拡大しなくなるため、アクセシビリティ上の問題が発生します。この理由から、 font-size を設定する場合には、 (em や rem のような) 相対的な単位が適しています。

https://developer.mozilla.org/ja/docs/Web/CSS/Length

pxのママでも特段問題は起きないと思います。最早、好み、ぐらいの話でしょうか。

しかし、先の記事でもちらっと書いたように、今回の参考サイトでは面白い実装をしていて、font-sizeなどをrem指定にして、ベースフォントサイズを以下のようにイジってレスポンシブ対応していました。面倒くさそうだけれどもちょっと面白いなあと思って、今回はそのやり方を採用してみています。

@media (max-width: 699px) {
    html {
        font-size: 15px;
    }
}
@media (max-width: 1199px) and (min-width: 700px) {
    html {
        font-size: 12px;
    }
}
@media (max-width: 1399px) and (min-width: 1200px) {
    html {
        font-size: 14px;
    }
}
@media (max-width: 1599px) and (min-width: 1400px) {
    html {
        font-size: 15px;
    }
}
@media (max-width: 1799px) and (min-width: 1600px) {
    html {
        font-size: 16px;
    }
}
@media (max-width: 1999px) and (min-width: 1800px) {
    html {
        font-size: 17px;
    }
}
@media (max-width: 2399px) and (min-width: 2000px) {
    html {
        font-size: 21px;
    }
}
@media (min-width: 2400px) {
    html {
        font-size: 24px;
    }
}

かなり細かくフォントサイズをイジっていてびっくりしました。実際の案件だとこんな試し打ちみたいなことは出来ないので、実験サイトも偶には作ってみるものですね。何故タブレットのサイズで一旦小さくしてあるのかまだあんまり分かっていません。記事をお読みの方にお伝えしたいことは、これはお試しであって、別にオススメの方法ではないよ、ということです。

今の自分と未来の自分のためにコメントを書く

私は基本的に私を信用していないので、少々コードが長くなろうがコメントを入れます。普段はREADMEや別のドキュメントにしておけばそこまでしつこくコメントを書く必要はありませんが、特に今回のように全面的にCSSでカスタムを入れるような場合は端からコメントで以下のような区切りを入れておきます。

追加CSSで書いている場合は、1つにまとめて書く必要があるので、兎も角しつこいぐらいしっかりコメントを入れていくことをオススメします。

/* ----------
 * config
 * ---------- */

/* ----------
 * base
 * ---------- */

/* ----------
 * utility
 * ---------- */

/* ----------
 * component
 * ---------- */

/* ----------
 * layout
 * ---------- */

/* ----------
 * global
 * ---------- */

/* ----------
 * page
 * ---------- */

/* ----------
 * media query
 * ---------- */

/* large (PC) */
@media (min-width: 1200px) {

}

地味だし最初は、面倒くさいなあと思われるかもしれませんが、コメントを書いておくと未来の自分に感謝されるのは間違い無いし、書いていても分からないことはあっても書かない方が良かったことは有りません。

CSSのTIPSをいくつかご紹介

というわけで、前置きで5000字超えてしまいましたすみません。

ここから実装部分を全部解説しているとまた凄い長文になってしまうので、一部を取り出して、他でも使いまわせそうな実装TIPSをご紹介したいと思います。

しゅるっと動くボタンのCSS

さて、参考サイトのアニメーションを全部ちゃんと追加するにはどうしてもちょっとだけJSが必要になるので今回はお預けですが、ボタンをhoverした時のしゅるっとしたアニメーションはCSSだけで出来るので取り出して解説しておきたいと思います。

これは、ボタンリンクのaタグの疑似要素 :before をtransform でアニメーションさせて実装されています。VK Blockのボタンでアイコンがある場合は以下のソースで実現できます。これをそのまま使うと、サイト上の全部のボタンブロックに影響があるのでもし試される場合はテスト環境などでどうぞ。

一部に使いたい場合は、使いたいページのクラス名（ホームページの場合は .home など）や「高度な設定」 > 「追加CSSクラス」から自分で付けたクラス名を先頭に付け加えてください。

/* ----------
 * config
 * ---------- */
:root {
    --base-margin: 20px;
    --color-primary: #d8141c;
    --color-secondary: #eebc3d;
    --color-body: #221e1e;
    --color-base: #fdfcf9;
    --color-bg-1: #f6ece1;
    --color-bg-2: #fff;
}

/* ----------
 * component
 * ---------- */
/* button */
.vk_button {
    margin: 0;
}
.vk_button_link.btn,
.btn {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 0.467rem;
    height: 3.5rem;
    padding: 0 var(--base-margin);
    overflow: hidden;
    transform: translateZ(0);
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.1);
    border: 0;
}
.vk_button_link.btn:before,
.btn:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
    transform-origin: center right;
    background-color: var(--color-primary);
    border-radius: 0.467rem;
}
.vk_button_link_after,
.vk_button_link_txt {
    position: relative;
}
.vk_button_link_after {
    font-size: 0.75rem;
    color: var(--color-primary);
    transition: transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.vk_button_link.btn:hover:before,
.btn:hover:before {
    transform: scaleX(1);
    transform-origin: center left;
}
.vk_button_link.btn:hover .vk_button_link_after,
.btn:hover .vk_button_link_after {
    color: var(--color-secondary);
    transform: translateX(0.33333rem);
    transition-delay: 0.1s;
}
.btn-primary {
    background-color: var(--color-bg-2);
    color: var(--color-body);
}
.btn-primary:hover {
    background-color: var(--color-bg-2);
    color: var(--color-bg-2);
}

VKロゴを追加する – SVGのCSSインライン化

ヒーローエリアにVKロゴを今回使わせて貰ったのですが、ココはCSSの疑似要素で実装しています。こういったSVG画像が適している画像を簡単に且つ軽量にWordPressサイト上に貼る方法が、SVG画像のCSSインライン化です。知っている方は知っているけれどなんだか意外と知られていない気配がするので、オススメしておきます。

という手順で作成できます。今回のケースだと、こんな感じの文字列になっています。

.home .smpl01_section--hero figure:before {
    /* logo-k */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20144%20270%22%3E%3Cpath%20d%3D%22M141%2044H58l-3%202-6%2018c-1%202%200%204%202%204h33c2%200%204%202%202%204l-52%2054%2027%2083c0%202-1%204-3%204H32l-2-2-14-43c0-3-4-3-5%200L0%20198a3%203%200%20000%202l10%2036%203%202h84c2%200%203-2%202-4L65%20129l1-2%2077-78c2-2%201-5-2-5z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}

あとはbackground関連のCSSでサイズ調整などをしてデザイン通りに表示させます。今回のヒーローエリアの部分で、関連しているCSSは以下の通りです。

.home .smpl01_section--hero figure:before,
.home .smpl01_section--hero figure:after {
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 30%;
    height: 30%;
    top: 60%;
}
.home .smpl01_section--hero figure:before {
    /* logo-k */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20144%20270%22%3E%3Cpath%20d%3D%22M141%2044H58l-3%202-6%2018c-1%202%200%204%202%204h33c2%200%204%202%202%204l-52%2054%2027%2083c0%202-1%204-3%204H32l-2-2-14-43c0-3-4-3-5%200L0%20198a3%203%200%20000%202l10%2036%203%202h84c2%200%203-2%202-4L65%20129l1-2%2077-78c2-2%201-5-2-5z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
    left: calc(45% + 15.5%);
}
.home .smpl01_section--hero figure:after {
    /* logo-v */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20182%20270%22%3E%3Cpath%20d%3D%22M179%200h-51l-2%202-7%2018c0%202%201%203%203%203h21c2%200%203%202%203%204L85%20192c-1%203-4%203-5%200L37%2073c-1-2%200-4%202-4h22l3%202%2016%2043c1%203%204%203%205%200l24-67c1-1-1-3-2-3H3c-2%200-3%202-3%203l80%20221c1%203%204%203%205%200L182%204c0-2-1-4-3-4z%22%20fill%3D%22%23D8141C%22%2F%3E%3C%2Fsvg%3E");
    left: 45%;
}

私は普段、ローカル環境上のnpmのライブラリで一発変換しているのですが、意外とオンラインのツールを使っても簡単に実装できたので、ちょこっとカスタマイズをしたい方にもオススメしたいなと思いました。これは今回のようにあくまで飾りのSVG画像に使う手段ですが、背景に配置したり、要素にちょっとアイコンを付けたい時などには重宝すると思います。

全幅のメディアと文章（テキスト）ブロックを使って今っぽくする

使っていますか、コアブロックの「メディアと文章（テキスト）」ブロック。使う人はめちゃくちゃ使うけれど、知らない人は案外スルーしている気がするブロックです。が、めっちゃくちゃ便利なのでぜひ活用してください。

今回のサンプルサイトでもあちこちで使っていますが、この「メディアと文章（テキスト）」ブロックにちょっとだけCSSを当てるだけで今っぽくなるTIPSがあるので紹介します。上記のスクリーンショットでは、背景の黒、SOLUTIONSとボタン、と右のイメージの部分に使っています。

いわゆる最近流行りまくっている「ズラし」を入れるテクニックです。PC画面の場合はちょっとあざとすぎるというか、やりすぎ感が否めませんが…。今回の場合は、ブロックの背景色を黒（ここでは #221e1e）とし、全幅設定をした上で、以下のCSSで実装しています。

.home .smpl01_section--solutions__header figure.wp-block-media-text__media {
    margin: -2rem 0;
}

これは単に上下にマイナスマージンを与えているだけです。.home .smpl01_section--solutions__header の部分を書き換えれば figure.wp-block-media-text__media はメディアと文章ブロックのクラス名なので反映したい箇所に適用できると思います。 `-2rem` の部分を好きな数値や単位に置き換えて、良かったらお試しください。

Lightningのブレイクポイント

実は私、今回初めてLightningをちゃんと触りまして、知りたかったブレイクポイントが分かったのでメモがてら書いておこうと思います。2020年12月の時点の数値ですのでご注意くださいね。

https://github.com/vektor-inc/lightning/blob/master/design-skin/foundation/_scss/_variables.scss#L26-L34

$sm-min: 576px;
$md-min: 768px;
$lg-min: 992px;
$xl-min: 1200px;

ここに有るように、Lightningのブレイクポイントは現在、上記の4つのようです。Overview · Bootstrap を見ても分かるように、Bootstrapのブレイクポイントと同じになっているんですね。

レスポンシブデザイン実装の必携アプリ、Responsibly App

CSSを書いている時は、まあJSでも同じですが、特にブラウザで表示確認をしまくると思います。そんな時にオススメなのが、

A Web Developer’s Browser | Responsively App

です！

Browsersync – Time-saving synchronised browser testing などを使っている（いた）方はなにやら既視感がある画面かもしれません。複数画面での表示チェックというのはWebサイト作成の時に必要な工程です。が、私はBrowsersyncは便利だけど重くって余程必要な場合以外はつい切っちゃうのですが、その簡易版かつ軽量版のように使えます。多分Chromeのエミュレート機能を応用しているのだと思います。だから多分、Safariの細かいバグの再現とかは難しいですが、めちゃくちゃ便利なので使ってみてください。実装速度が跳ね上がると思います。

ごめん、ちょっと間に合わなかった！

そして、すみませんー！ヘッダーもフッダーもまだ出来てませんが、今回のサンプルサイトはこちら！

2020 Vektor Advent Calendar Sample Site | Just another WordPress site

ほんとはまだまだ、

• ヘッダーのメニューを1個だけボタンぽくする方法
• 視差効果をCSSだけで実装してみる
• loding画面を自作してみよう
• ちょびっとだけJSを足したら出来るカコイイアニメーション
• ふわっと大きくなるインタラクション

とかとか色々お伝えしたいことが山程あったのですが、間に合いませんでした！ごめんなさい！

半端になってしまったので「Vektorのスライドブロックをカスタムする方法」は後日別途記事にします！その他の上記のTIPSは、もしご要望があれば書きます！

感想

超久々に素のCSSを書きました。超絶面倒くさい。Sassさん、PostCSSさん、いつも有難う。たぶん、prefixを忘れている気配がする。ごめんなさい。

ノーコード、ローコード流行っていますが、私に言わせればぶっちゃけ結果は回り道です…！でも入門には良いと思いますし、手軽さはとても大事。今回こうやって縛りで作成してみて、多くの方の躓きポイントに気づけたりしたし、普段のツールのメンテナンスの面倒くささは全く必要な過程で超便利なんだなということも痛感しました。もう文句は言いません、たぶん暫くは。

そして私的に今回の最大の収穫で、みなさんに超おすすめなのが、

VK All in One Expansion Unit CSSカスタマイズ！動作が早くて圧縮してくれて安定しています！

コアの追加CSSは入力補完やプレビューがあってちょびっと書き足すにはとっても便利なのですが、書けば書くほど重くなりがち・保存エラーしがち。

今回みたいにがっつりCSS書いちゃうぞ、な方はプレビューはChromeなどのブラウザのDev Toolを利用して確認しつつ、実装はExUnitからがオススメです。どうせ圧縮するならコメントも抜いてほしいな、というワガママを中の人にリクエストしたので、いずれまたちょっと進化してくれるでしょう。

あと、参考サイトのコードを確認しながら、書いたので時間がかかってしまいましたが、とても学びが多かったです。ただ、ちょっと参考にしてみるなら兎も角、がっつり参照するのは骨が折れるので、こうやってアドベントカレンダーで書くぞと自分を追い込んでいない状況だったらまず挫折していたと思います。もしやってみようという方は宣言の力を使うのをオススメします。はー、つかれた！

というわけで、Part 4（追記）は来年かな？早めに書きます！

明日の「Vektor WordPress Solution Advent Calendar 2020」24日目の記事はShohei Tanakaさんによる「クリスマス EVE に Lightning で EC を。」の予定です！わーもうイブですね！クリスマスまであとちょっと！お楽しみに！

この記事を書いた人

mimi

フリーランスのWeb デザイナー・開発者。

2020年9月からVektorチームにて主にデザイン、WordPressのブロック開発に関わっています。

最近の投稿

• ウェブ制作・IT2021年12月16日VektorチームでFigmaを1年使ってみての所感と、Vektorブランドガイドラインのリリース
• WordPress2021年7月2日WordPress 5.8 で気になるブロックエディタ周りのアレコレ
• ウェブ制作・IT2020年12月23日2020に流行ったWebサイトのデザインをLightningとVK Blocksで再現してみよう Part3
• ウェブ制作・IT2020年12月10日Figmaでデザインを起こしてみよう – 2020に流行ったWebサイトのデザインをLightningとVK Blocksで再現 Part2

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

今すぐチェック

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。

VK パターンライブラリを今すぐチェック

ブロックエディターで

ABテストを


自由に作成できる VK AB Testing

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

VK AB Testing を詳しく見る