【シンジ】戦略×エンジニア×Webデザイナー

Webコンサル、デザイン、サービス開発、経営に関することを呟きます。

Swift5.4の新機能についてまとめてみた!

f:id:Shinji0418s:20210226085655j:plain

どうも。株)WIREBASEの中村です。

 

本日は、現在プレビューリリース中のSwift5.4について綴りたいと思いますー。

Swift5.3がリリースされたのが2020年の9月16日なので、もの凄いスピード感で進化を遂げていますね。

 

そんな来たるSwift5.4。結局、何がどう変わるのか?

新しい機能を纏めていきたいと思います。


Xcodeの立上げ時

Xcodeのプロジェクトを経験した方なら知っていると思いますが、Xcodeのプロジェクトを立ち上げる時、"var str"と書きますよね。

var str = "Hello, playground"

 

Swift5.4では、それが "var greeting"となります。

var greeting = "Hello, playground"

 

➁複数の可変個引数パラメータが設定可能に!

以前のSwiftでは、下記コードの様に1つの可変個引数パラメータ―しかありませんでしたが、Swfit5.4では、functions, methods, subscripts, initializersの様に複数の可変長引数(variadic parameters)を設定することが可能になりました。

 

以前のSwift

func method(singleVariadicParameter: String) {}

 

Swift5.4

func method(multipleVariadicParameter: String...) {}

 

上記の関数で問題なく呼び出せるのですが、もちろんStringの配列要素は一つでも構いません。

method(multipleVariadicParameter: "Can", "Steve", "Bill")

 

複数の可変長引数は配列と同じようなの様に扱えるのですが、もちろんパラメーターで値を呼び起こすときは、その値が実際に存在するかなども含め事前にチェックしておく必要がありますね。下記のコードでチェックできます:

func chooseSecondPerson(persons: String...) -> String {
let index = 1
if persons.count > index {
return persons[index]
} else {
return "There is no second person."
}
}

 

③Result Builderの実装がより重要に!

SwiftUIが登場して以来、Builderの実装はかかせないものとなりつつありますが、Swift5.4ではそれがより顕著になりました。

 

みなさんもご存じの通り、result builderを使えば、Stringを出力する関数が複数あっても問題なかったですね。

 

@resultBuilder、で新しい構造体を定義することで新しいresult builderを定義できます。

 

それが、以下のresult builderを使うと、String配列の全要素を連結することができます。

@resultBuilder
struct StringBuilder {
static func buildBlock(_ strings: String...) -> String {
strings.joined(separator: "\n")
}
}

 

下記のコードでより詳細に説明しましょう。今迄はBuildBlockというメソッドを使って値を定義しなければならなかったため、string配列の各要素にカンマを入れなければなりませんでした。

let stringBlock = StringBuilder.buildBlock(
"It really inspires the",
"creative individual",
"to break free and start",
"something different."
)
print(stringBlock)

 

これからは、Stringbuilderという関数でカンマを入れずに値を定義できるようになりました。

@StringBuilder func makeSentence() -> String {
"It really inspires the"
"creative individual"
"to break free and start"
"something different."
}
print(makeSentence())

 

あまり大したことじゃないですが、他にもresult builderを使うことのメリットはたくさんあったりします。

 

例えば、result builderに2つの新しいメソッドを追加すると、様々なcondition (条件)を使ってString配列を生成できるようになりました。

@resultBuilder
struct ConditionalStringBuilder {
static func buildBlock(_ parts: String...) -> String {
parts.joined(separator: "\n")
}
static func buildEither(first component: String) -> String {
return component
}
static func buildEither(second component: String) -> String {
return component
}
}

 

以下の通り、if loopを用いて、ブール値に応じてString配列の要素を変更することもできたりします。

@ConditionalStringBuilder func makeSentence() -> String {
"It really inspires the"
"creative individual"
"to break free and start"
if Bool.random() {
"something different."
} else {
"thinking different."
}
}
print(makeSentence())

 

result builderで、他にもいろんなことができるので是非使いながら試してみてください。

 

 

④同じ名前の関数をいくつも定義できるようになった

同じ名前の関数を使いたいときってありません?あんまりないかな。( ´∀` )

Swift5.4だと下記コードでそれが可能になりました。

struct iPhone {}
struct iPad {}
struct Mac {}
func setUpAppleProducts() {
func setUp(product: iPhone) {
print("iPhone is bought")
}

func setUp(product: iPad) {
print("iPad is bought")
}

func setUp(product: Mac) {
print("Mac is bought")
}

setUp(product: iPhone())
setUp(product: iPad())
setUp(product: Mac())
}

 

 

まあ、書いてみるとマイナーチェンジな気がするのですが、使いようによっては役立つものもありそうです。

 

 

それでは、今日はこの辺で。

案件のご相談は、LINE/Twitterにてご相談お待ちしております。

 

株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

 

 

 

弊社、ShopifyやThinkific周りの案件も対応できるようになりました。

f:id:Shinji0418s:20210225085133j:plainどうも。株)WIREBASEの中村です。

 

本日は弊社の提供できるサービス幅が広がったため、告知のブログです。

新しくShopifyやThinkificに対応できる開発者が参画したので、ご紹介します。

弊社が扱える言語やフレームワークは他にも色々あるので以下の記事をチェックしてみてくださいー。

wirebase-nakamura.hatenablog.com

 

先ず初めに、Shopify、Thinkificってなんぞや?という方にサービスの内容をご説明します。

 

【Shopifyの紹介】

Shopify(https://www.shopify.jp/)は、誰でも簡単にネットショップが開設できちゃう便利なECプラットフォームです。

 

現在では175カ国100万円店舗以上で導入されていて、世界NO.1シェアをほこっているそう。そんなに浸透しているんだー。驚き。

 

低コストで導入が可能かつ決済手数料も低く、かなり自由度も高いので複雑な機能にも対応できます。

 

もちろん、弊社くらいのレベルになると、Shopifyのデフォルト機能だけではなくて、機能自体をフルカスタマイズで開発できちゃったりするんですけどね。

 

【Thinkificの紹介】

Thinkific(https://www.thinkific.com/)もShopifyと似たようなものですが、何でも売れるわけではなく、動画の販売に特化したプラットフォームです。今流行りのオンラインサロンでの動画コンテンツ販売などに使われることが多いです。

 

画面もかなりシンプルで、直観的に操作することができるので、デザインも洗練されていてかなり使いやすいですね。

 

【開発者の紹介】

プライバシーの問題もあるので、名前は非公開でご紹介します。

  • Shopify、Thinkific歴10年以上
  • TeachableやKanjabiなどを使った開発も超得意
  • 特に、不動産事業、教育機関などの学習系プログラムに強い
  • 日本語だけではなくて、英語、スペイン語に堪能なトリリンガル

彼がThinkificで作った法人向けのデモ(英語版)があるので以下の動画にてご紹介しておきます。会社が従業員向けに作ったコロナ対策教育プラットフォームで、彼はこれを爆速2週間で作り上げました(笑)

www.youtube.com

 

簡単に言うと彼は、

 

秒速(たったの2週間)で複雑なShopifyやThinkificプラットフォームを作り上げてしまう男

 

です。

 

ということで、WEBサイトやモバイルアプリ、WEBシステムの開発に加えて、ECショップや動画コンテンツの領域にも本格参入できる体制が整ったので、宜しくお願いします。

 

ShopifyやThnkificで新しいサービスを『今すぐ』立ち上げたい!!という方は、LINE/Twitterにてご相談お待ちしております。

 

それでは、今日はこの辺で。

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

 

 

 

 

 

【プログラミング初心者向け】RUSTで簡単なAPIを構築してみた

f:id:Shinji0418s:20210224092940j:plain

どうも。株)WIREBASEの中村です。

 

今回は、PostgresのORMとして人気のあるRustを使ってシンプルなAPIを構築してみようと思います。特に初心者の方に分かりやすいようStep by Stepで分かりやすく説明していきます。

今回のプロジェクトは、RocketやDiesel等のフレームワークを使って、Medium(https://medium.com/)という米国の記事投稿サイトに投稿している記事リンクを管理するためのAPIを構築してみようと思います。

 

もくじは以下の通りです。

  • 1. セットアップ
  • 2. コードを書く

 

先ずは、これから作るAPIの構造を決めましょう。大きく分けて3つの要素で構成します。

/user: ユーザーアカウントを作成して、ユーザーのアクセストークンを認証
/auth: アクセストークンを取得するためのグループ形成
/posts: Medium上の投稿リンクを作成or取得。

実際に構築した後、サーバーで実行したときに得られる出力は以下の通りです。

Mounting /user:=> POST /user application/json (create)=> GET /user/info (info)=> GET /user/info [2] (info_error)Mounting /auth:=> POST /auth/login (login)Mounting /posts:=> POST /posts (create)=> GET /posts (read)=> POST /posts [2] (create_error)Rocket has launched from http://0.0.0.0:8000

 

1. セットアップ

先ずは、RustをダウンロードしてPostgresのインスタンスは実行しているところから始めます。

 

Rustのプロジェクトを立ち上げます。(ここでは、blog-backendとプロジェクトを名付けます)

cargo new blog-backend

 

Rocketのフレームワークを使いたいので、ナイトリーバージョンのRustを使う必要があるので、以下のコマンドを実行します。

rustup override set nightly

rustup update && cargo update

 

次にDieselをインストールして、Medium内のデータベースとの接続リンクを指定します。


cargo
install diesel_cli --no-default-features --features "postgres"export DATABASE_URL=postgres//user:pass@localhost/blog

diesel setup

 

前述の通り、ユーザーと投稿、二つのデータタイプが必要なので、それぞれテーブルを生成します。

先ずは、ユーザーから、

diesel migration generate users

 

そうすると、ディレクトリ(migrations/date_of_creation_users/)内にup.sqlとdown.sqlというファイルが生成されます。

up.sql

f:id:Shinji0418s:20210224085909p:plain

down.sql

f:id:Shinji0418s:20210224090153p:plain

 

投稿も同じ手順でテーブルを生成します。

up.sql

f:id:Shinji0418s:20210224090300p:plain

down.sql

f:id:Shinji0418s:20210224090313p:plain

 

そして最後にCargo.tomlファイルに必要な全ての依存関係を定義します。

f:id:Shinji0418s:20210224090529p:plain

 

これでコーディングに入れます。

 

2. コードを書く

先ずは下記のソースコードを書きます。

f:id:Shinji0418s:20210224090808p:plain

 

データベースと接続するため、以下のソースコードファイルを使用してプールを作成し、データベース接続を再利用できるようにします。

f:id:Shinji0418s:20210224091023p:plain

 

Rocketのサーバーを起動して、ユーザーと投稿モジュールの両方をマウントするmain関数を指定します。

f:id:Shinji0418s:20210224091222p:plain

 

次はユーザー側の構築です。

f:id:Shinji0418s:20210224091548p:plain

 

そして認証機能はJWTを使います。

f:id:Shinji0418s:20210224091651p:plain

 

このファイルでは、基本的にユーザーの認証が必要となるリクエストは全てチェックするようになっています。アクセストークンが見つからなかったり、無効だったりするとリクエストが転送されるようになっています。

 

最後に、ユーザーと認証プロセスに必要なpandora関数を定義します。

f:id:Shinji0418s:20210224091930p:plain

 

投稿サイドのモジュール生成も同じようなプロセスをふみます。

f:id:Shinji0418s:20210224092044p:plain

最後に、2つのルートを定義します。1つは有効なアクセストークンを含んだリクエストを処理するためのルート、もう1つは不正なエラーを送信するためのルートになります。

 

f:id:Shinji0418s:20210224092108p:plain

 

そして、実行をするとどうでしょうか。これでプログラミング初心者でも簡単にRustのフレームワークを使ってAPIを構築できましたね。

cargo run

 

それでは、今日はこの辺で。

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

 

【フリーランスエンジニア向け】 案件獲得するのに必要なソフトスキル6選

f:id:Shinji0418s:20210223095617j:plain

どうも。株)WIREBASEの中村です。

 

今日は、フリーランスエンジニアが案件獲得するのに必要なソフトスキルをいくつかご紹介します。一般的にソフトスキル、と言われても定義があいまいでざっくりしているのですが、ここでいうソフトスキルとは、お客様との折衝時に必要なコミュニケーションスキル、という風に定義します。

 

もちろんハードスキルと呼ばれるプログラミング言語フレームワークを学ぶことも重要なのですが、一方で、ハードスキルはあるけど、自分の持つソフトスキルを最大限に活かせないフリーランスエンジニアも多いと思います。本記事を読んで少しでもソフトスキルの向上に役立てれればと思います。

 

この記事は、

フリーランスエンジニアだけど、どうすれば新規案件を獲得できるのだろう?
必要なソフトスキルってなんだろう?

こんな悩みを抱えているフリーランスエンジニア向けにおススメの記事です。

もともとはフリーランスエンジニアとして始まった弊社、株)WIREBASEは、現在売上が300万円/月(月利250万円)の普段Webサイト/アプリ/Webシステム等のコンサル/開発会社です。今迄に取扱った案件は200件以上の実績があります。

 

結論から申し上げますと、フリーランスエンジニアが案件獲得するのに必要なソフトスキルは、大きく5つあります。 

  1. コミュニケーション能力(基本中の基本)
  2. 話の意図を理解する
  3. 事象を構造化して提案できる能力
  4. アップセルする能力
  5. 可愛がられる能力(愛嬌)

 

1. コミュニケーション能力(基本中の基本)

対人関係で一番必要なのは、コミュニケーション能力ですね。実はこれできていない人多いんです。私がここで指しているのは、大学サークルのような飲み二ケーションではなくて、しっかりとしたビジネスの場でのコミュニケーションのことです。

f:id:Shinji0418s:20210223214212p:plain


クライエントとの関係を構築するには、特に以下2つのコミュニケーションスキルは必須なので極めるようにしましょう。

 

1-1. 質問にきちんと答える

一番多いのが、クライエントの質問に答えれてないフリーランスエンジニアです。例えば、クライエントが「案件Aの進捗はどうですか?」と聞いてきたとします。それに対して、「〇〇という問題があって、それが〇〇ということになってしまって、大分遅れてが出ております。あとは、〇〇と○○が残っているので、そこだけ頑張ってやれば大遅れは取り戻せると思います。」と、ぐだぐだと回答になっていない返事をしてしまうフリーランスエンジニアが多い印象です。

 

正しい返事の仕方としては、「案件Aの進捗は現在30%ほどで、XX月XX日ごろまでにはある程度お見せできる目途が立ちます。大分遅れが出てしまった原因は〇〇〇で、今後は遅れが出てしまった分、〇〇のように工夫したいと思います。」です。このように、クライエントの進捗はどうか?という質問に対して、具体的な数字も交えて、どれくらいの進捗なのか、そしていつ頃までに終えることができるのか、伝えてあげるようにすると良いでしょう。

 

1-2. 結論から話す

先程の例でもそうですけど、「案件Aの進捗はどうですか?」と聞かれて、ぐだぐだと余計なことを話すのではなくて、「案件Aの進捗は現在30%ほど、、」と、結論から話すクセをつけましょう。

 

長い話は飽きられますし、話している本人も聞き手の無関心な態度を感じ、「やっぱり自分は話し下手だ……」とますます人前で話すことが苦手になってしまう悪循環につながります。クライエントも何を話したいのか、イマイチ理解できないまま、次のトピックに移ってしまうケースが多いです。

 

「話している途中で、話す内容を忘れてしまう」「脱線して、本題に戻ってこられない」「一番重要なメッセージが何なのかポイントが絞りきれない」などがあります。これらを全て解決するのが、「結論から話す」です。

 

2. 話の意図を理解する

クライエントの言わんとしていることをきちんと理解してあげる。これができれば、自然と良い提案もできるようになります。

 

例えば、先ほどの事例でいうと、クライエントが「案件Aの進捗はどうですか?」と聞いてきた場合、ただ進捗に関して聞きたいのではなくて、「全体の進捗に不安を持っている」、もしくは「進捗の報告頻度が足りていない」などの意図をもって聞いてきている場合が多いです。

 

従って、「案件Aの進捗は現在30%ほどです。」と答えるだけではなくて、いつ頃終わりそうなのか、また、どうしたら遅れを取り戻せるのか、ということをきちんと説明してあげるとクライエントも納得してくれます。

 

意図を汲み取る能力を持つことで、クライエントへの印象も変わり、「自分の言ったことをきちんと理解してくれる」良いコンサルタントとしての印象付けが可能になります。

 

3. 事象を構造化して提案できる能力

これはかなり高度な技術なのですが、他のフリーランスエンジニアと差別化するには、必要な能力でしょう。構造化とは、様な物事を分類毎に分類✖順列を付けてあげる、ことです。
f:id:Shinji0418s:20210223214121p:plain
物事や話を構造化をすることで、以下の様なメリットがあります。

  • 問題解決の漏れやダブりを回避しやすくなる
  • 問題の原因に対して適切な対処ができるようになる
  • 問題解決の優先順位がつけやすくなる
  • 情報共有やコミュニケーションがしやすくなる


こうして問題がありそうなところを正確に素早く特定して対処することでただの外注先ではなくて、付加価値を付けたコンサルタントとして見られるようになり、他の案件などを紹介してくれるケースも多々あります。

 

4. アップセル能力

ただいただいた案件をこなしているようであれば、1回限りのご縁で終わってしまうことが多いのですが、仕事をきちんとこなした上でアップセルを狙ったコミュニケーションを取ると、継続して案件を貰えたりもします。

 

アップセルとは、顧客の単価を向上させるための営業手法の一つで、現在ある商品を検討している顧客や以前商品を購入した顧客に対しより高額な上位モデルに乗り換えてもらうことです。例えば、フリーランスエンジニアの場合だと、デザイン制作だけではなくて、実際の開発や運用保守まで依頼されたり、他の案件を紹介されたり、といったことが頻繁にあると思います。

 

具体的には、クライエントとの会話の中で、自分が持っているスキルなどを小出しにすると良いでしょう。出すタイミングや内容は考えないと、逆にウザがられる可能性もあるので、気を付けてください。

 

例えば、プログラミング案件で、ふとSEOの話が出たときに、「関連キーワードは○○だと思いますね。」とか「この関連キーワードであれば上位取れそうですね。」と、自分ができそうなことを匂わせるような発言をすると、「SEOもできるの?じゃあそっちも頼んじゃおうかな」という感じで、他スコープももらえたりしちゃいます。

 

5. 可愛がられる能力(愛嬌)

これは生まれつきのものなので、一晩で習得して実践できるものではありません。それゆえ、かなりの価値はあります。もともと愛嬌がない人でも、実践できることはいくつかあるので、ご紹介します。

f:id:Shinji0418s:20210223214330p:plain



5-1. 先ずは信頼されること

先ずは案件の中で結果を出すことが大前提としてあります。愛嬌は良いけど、いつも案件を出すと失敗する人には、徐々にチャンスが減ります。失敗したとしても次は取り返す気持ちで成果を出す。これを繰り返していくうちに信頼され、その分チャンスも増えていきます。先ずは、出来る限り成果を出してクライエントの信頼を勝ち取ることを最優先にがんばりましょう。

 

5-2. プライドを刺激しない

みんなそれぞれ一定の水準でプライドいがあります。友達とはいえど、そのプライドを刺激されたら誰でも不快に思うはずです。特にクライエントの場合だと、より慎重に気分や感情を汲み取って、プライドを傷つけないようやり取りすることが大切です。

 

5-3. 表情を豊かにする

いつも無愛想にいてはだれも好印象を抱けません。極力笑顔でいるべきなのですが、喜怒哀楽をバランスよく出す方がいいでしょう。表情豊かな人は「いつも本音で心内を見せてくれている」というイメージを抱かれやすいのでコミュニケーションが取りやすくなります。

 

それでは、今日はこの辺で。

 

WEBに関するご相談はLINE/Twitterにてお待ちしております。

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

 

 

【最新版】2021年Webデザインのトレンド6選(立体感✖眼に優しいデザイン?)

 

 

f:id:Shinji0418s:20210219101116j:plain

 

どうも。株)WIREBASEの中村です。

 

今日は、2021年最新版のWebデザインのトレンドをいくつかご紹介しようと思います。

 

  • 今年流行っているwebデザインのトレンドってなんだろう...?
  • 自社のwebサイトにも流行っているwebデザインを活用したいけど、何をどうすればいいかわからない...?

そんな方におススメの記事です。

 

弊社、株)WIREBASEは普段Webサイト/アプリ/Webシステム等のコンサル/開発会社で、ウェブデザインの案件も多数抱えています。今迄にウェブデザインに関連する案件も200以上の実績があるので、その道のプロです。

 

さて、本題にはいりましょう。

早速ですが、結論から言うと、2021年のwebデザインのトレンドは、

「立体感」✖「眼に優しい」デザイン

です。詳細は以下のもくじに沿って説明するので是非お目通しください。

<もくじ>

  • 2021年のデザイントレンド6選
    1. パララックスアニメーション
    2. ニューモーフィズム(フラットデザインマテリアルデザイン
    3. 抽象的なデザイン
    4. 眼に優しい色合い
    5. 超ダイナミックなスクロールアニメーション
    6. 立体感に重視した色合い

 

 

1. パララックスアニメーション

webサイト上のアニメーション技術は年々革新的になってきていますが、今年はコロナ禍でwebサイトを見る機会が多くなったこともあって、特に革新的な新しいアニメーションが目立つようになってきました。特に革新的なのはパララックスアニメーションです。

 

パララックスアニメーションとは?

パララックスは「視差」という意味で、方向や物の位置の差異のことを言います。具体的には、以下の例やリンク先のwebサイトのようにユーザーがスクロールすると新しい要素が動いたり、アニメーションさせたりすることで、視覚の差異や奥行きを演出し、立体感を演出することができるアニメーションです。近くにある要素(前景)が背景より早く動いたりすることでより立体感を強調することができます。

Coffee web page hero parallax animation

By Pinch Studio

 

greatforestparkballoonrace.com

 

前景と背景のスピードや奥行き感によって生み出される立体感は、プロダクト自体が手に現実にあるのではないか、と錯覚を起こすほどです。それほどの没入感を表現することができるため、特にプロダクトのセールスページやランディングページへの起用をおススメします。

 

 

2. ニューモーフィズム(フラットデザインマテリアルデザイン

また、難しい横文字の単語が出てきましたね。汗 ただ、このニューモーフィズムは2021年に爆発的にトレンド化しました。比較的新しいトレンドではあるのですが、実はフラットデザインマテリアルデザインを掛け合わせたようなデザインのことを指します。

今迄はミニマリズムフラットデザインが流行りでwebデザイン自体がシンプルな程良いとされてきましたが、それだけではなく、以下のように凹凸など立体感のあるデザインを用いることでミニマリズムフラットデザインとの相性がよく、美しく洗練された印象のデザインに仕上げることができます。

https://dribbble.com/shots/9517002–Light-Mode-Simple-Music-Player

 

Minimalist web page design with neumorphic elements

By Sara Salehi via Dribbble

 

フラットデザインによって失われた立体感や触覚的な感覚を表現することができるようになります。結果、この「親しみやすさ」によって、デザインを通じてユーザーとのより深いレベルでのコミュニケーションができるようになり、且つシンプルでミニマルな表現が可能になりました。

 

 

3. 抽象的なデザイン

抽象的な図形(◇、〇など)だけだと、特にシンプルでミニマリスト的な印象を与えてしまいますが、2021年のトレンドでは、キャンバスに色鮮やかな色彩をふんだんに使って、自由に、且つ抽象的に描く。まるでピカソの様なタッチでユーザーが一度みたら忘れらない。そんなデザインを用いるデザイナーが多くなってきました。以下の例が代表的ですね。

 

Agency web page design with abstract art elements

By andrei2709

 

 

4. 眼に優しい色合い

コロナ禍では、在宅ワークが多くなり、特にパソコンを見る機会が多くなりました。

長時間画面とにらめっこしていると眼の疲労がたまってきます。そんな状況に応じて、量産されたのが、眼に優しい色合いのwebデザインです。

 

Hemp product web page design with soft green colors

By Creative_David

 

薄めの緑、パステルブルー、ライトピンクなどソフトで優しい色合いで、落ち着きとリラクゼーションをもたらしてくれます。

特にオーガニック系のプロダクトサイトやランディングページには最適ですね。

 

5. 超ダイナミックなスクロールアニメーション

ユーザーがスクロールをするときでさえ、ユーザーとの「インタラクション」ができる、スクロールアニメーション。2021年では、よりダイナミックに表現されるようになりました。よりダイナミックにすることで、インタラクションも増え、リピートするユーザーが格段に増える、そんな便利なアニメーションです。

 

Digital marketing agency web page design with animated scrolling

By Hiroshy⭐⭐⭐⭐⭐

 

. 立体感を重視した色合い

やはり2021年のwebデザインのトレンドは「立体感」です。デザインだけではなくて色合いなどもできる限り立体的にするのが今のトレンドです。画面から取り出せるのではないか、そう思わせる、ことが大事なのではないでしょうか。

 

Apple Big Sur OS wallpaper and user dashboard

Big Sur OS via Apple

 

3D app icon designs in Big Sur style

 By unfold via Dribbble

また、色合い自体も以前みたいにはっきりしたものではなくて、より不完全で自然な背景色を用いてブレンドするデザインが多くみられるようになってきました。よりハイレベルなリアリズムの追求というべきか、抽象度の高いデザインよりは、現実世界での実用化や汎用性を追い求めているような、webデザインが多くなりましたね。

 

というわけで、トレンド上位6選をまとめると、

  • 「立体感」✖「眼に優しい」デザインが2021年の最新トレンド
  • よりリアリズムを追及したデザインが多くなっている 

でした。

 

それでは、今日はこの辺で。

 

WEBに関するご相談はLINE/Twitterにてお待ちしております。

 

 株)WIREBASE中村LINE↓

友だち追加

株)WIREBASE中村Twitter

 

【完全版】 これさえやれば必ず成果が出る!ウェブサイトのコンバージョン率が120%上がる必勝法(後編)

どうも。株)WIREBASEの中村です。

 

本日は、昨日投稿したこちらの【後編】を書きます。

wirebase-nakamura.hatenablog.com

 

前編が分析の方法に特化していて、後編は具体的な施策について書きたいと思います。これを読めば貴方もWEBサイトのコンバージョン率向上施策について他社にコンサルできるレベル、もしくはチェックリストに沿って実行すれば必ず成果は出るので、是非活用してみてください。

 

前編でも記したように、WEBサイトのコンバージョン率を高めるために絶対やるべきチェックリストを以下に記しますね。このチェックリストに沿って本日は3~5までを一つ一つ丁寧に説明していきます。

<ウェブサイトのコンバージョン率を高める施策チェックリスト>

  1. クライエントからの与件を整理する
  2. WEBサイトを分析して理解する
    • 誰が、どこから、どのように流入しているか分析する(アクセス解析
    • WEBサイトの問題点を見つける(ページ解析)
  3. ウェブサイト全体の構成を改善する
    • ユーザーが知りたい情報を簡素化して提供する
    • ユーザーとのコミュニケーションに重視した文章表現
    • ユーザーの「なりたい」を想起させる画像を挿入
  4. ウェブサイトの動線を改善する
    • 動線を簡素化してクリック数を減らす
    • コンバージョンポイントを増やす
    • コンバージョンポイントの文言やデザインを改善
  5. 問い合わせフォームを改善する
    • 問い合わせフォーム入力に係るユーザーの作業負担を軽減する
    • 個人情報を提供する際の不安感を払拭する
    • 問い合わせフォームの構成やデザインを改善する

 

3. ウェブサイト全体の構成を改善する

3-1. ユーザーが知りたい情報を簡素化して提供する

前編で分析した通り、アクセス解析によって、誰が、どのように、どんな意図で流入してくるのか、が見えてきました。この解析結果をもとにどのような情報構成にすれば良いか、アイディア出しをしていきましょう。

 

例えば、自社サービスがSPEEDAの様な業界分析ツールであった場合、以下のユーザーからアクセスが頻繁にあったとします。

  • ユーザー属性①:30~60代/中小企業/経営企画
  • 検索キーワード①:「成長産業、分析」
  • 意図①:新しい事業を企画しているけど、今後どの分野/領域に参入すれば良いのかを分析したい

この場合、ユーザーが知りたいのは、①どの分野/領域に参入すれば良いのか、➁それを調べる上で、どのようなサービスが最適なのか、この2点です。①の問いに関しては、問題提起文をウェブサイトの上段に持ってくる、ファーストビューにキャッチ―な提供価値に関する文言を入れる、などの施策が効果的で、➁に関しては、提供できるサービス別に他サービスとの比較テーブルなどを作るとこのユーザーの興味・関心を引くことができます。

 

また、できる限り伝えたいメッセージを簡素化して伝えることも大切です。ここでユーザーが抱えているニーズに対するメリットをいくら訴求しても「心」に響かないとせっかく流入したユーザーはすぐに離脱してしまいます。

 

どれだけ簡潔にユーザーへのメリットを伝えきれるか、これを徹底することでユーザーがCVに至る可能性は格段と高くなります。

 

3-2. ユーザーとのコミュニケーションに重視した文章表現

また、「伝え方」も重要です。ただ、簡潔に提供価値や問題提起を述べるだけではなくて、ユーザーと「コミュニケーション」をする文言が必要です。

例えば、英語学習教材の販売サイトであれば、単に「効果が出る英語学習教材」とストレートに訴求するよりは、

 

「あなたは英語学習でこんな間違いしていませんか?」

 

のように、「間違った英語学習によって時間とお金を無駄にしているかもしれない」リスクについて意識的に問題提起をしてあげるのが、ユーザーとのコミュニケーションです。

このようなキャッチコピーを増やせば間違いなく、ユーザーの興味・関心を喚起することが可能です。

 

3-3. ユーザーの「なりたい」を想起させる画像を挿入

例えば、転職サイトであれば、以下の様なイラスト中心のファーストビューよりも、下の人物画像の方が「なりたい」自分を想起させる写真画像の方がユーザーの関心を引くことができます。

 

f:id:Shinji0418s:20210216175355p:plain


      ▼▼▼

 

f:id:Shinji0418s:20210216175322p:plain

 

また、人物写真だとイラストより信頼度も格段と上がるので、ユーザーも安心して問い合わせることができるようになります。

 

4. ウェブサイト全体の構成を改善する

 4-1.動線を簡素化してクリック数を減らす

出来る限り動線を減らしてユーザーに負担をかけないようにしましょう。

以下のように動線がごちゃごちゃしてしまい結局問い合わせ窓口がわからないWebサイトが多いですが、ユーザー目線に立ってできる限り、ユーザーが迷ってしまわない=途中離脱しない動線づくりを心がけましょう。

f:id:Shinji0418s:20210216175742p:plain


 4-2.コンバージョンポイントを増やす

これは比較的簡単ですね。「問い合わせはこちら」や「無料トライアルはこちら」などのコンバージョンボタンを多く設けることで、その分ユーザーが問い合わせページまで飛ぶ確率が高くなります。特に効果的なのは固定フッターとして、ページをスクロールしても常に表示されている形式にしたりすると効果的です。

 

4-3. コンバージョンポイントの文言やデザインを改善

BtoBサイトでは一般的に購買意欲が高いユーザー向けに「お問い合わせ」というCTAが用意されますが、よく知らない企業に問い合わせをして返答を求めるのはユーザーにとってハードルが高く感じられます。そこで「ホワイトペーパーのダウンロード」や「無料トライアルはこちら」などの文言を用意し、お客様の問い合わせに対するハードルを下げてあげることが大切です。

 

また、デザインに関してもできる限り目立つよう、ウェブサイトの全体の配色から反対色の色を選んでデザインするようにしましょう。

 

コンバージョンポイントのデザインを一つ変えるだけで問い合わせページへの流入数も大分変ってきます。

 

4. 問い合わせフォームを改善する

4-1. 問い合わせフォーム入力に係るユーザーの作業負担を軽減する

BtoBにおいて優先度の低い情報(例えば性別や年齢など)まで記入してもらうなど、不要な項目はありませんか?入力項目を最小限にすることで、CV率を向上させることができます。 まずは本当に必要な情報のみに絞ってみましょう。

f:id:Shinji0418s:20210216181519p:plain

 

4-2. 個人情報を提供する際の不安感を払拭する

 コンバージョン数とは、多くは問い合わせフォームや無料トライアルなどといったにゅりょくのひと手間を完了させてユーザー数のことです。つまり、ユーザーに「入力が面倒」、「知らない企業に個人情報を渡すのは気が引ける」、と思われしまってはコンバージョン数を増やすことは難しいです。従って、その不安や面倒という心理(コスト)を上回るコンテンツ(ベネフィット)を提供しなければなりません。

 

例えば、前例でだした転職サイトなどであれば、「自社が手持ちの転職先候補会社のリスト等を無料で配布する」など、ユーザーにとってコストベネフィットの観点から有利になるようにすることで、お客様の不安感や面倒くさい・・・というボトルネックを解消することが可能です。

 

4-2. 問い合わせフォームの構成やデザインを改善する

問い合わせフォームに関しては、以下の9つを改善すれば問題ないです。

  1. 一覧性を重視する
    →フォームが1スクロール内に収まっているなど、ユーザーが入力する量を事前に把握できるようにしましょう

  2. CTAは「どんなアクションにつながるか」が分かる表現にする
    →ただ「送信する」ではなくて、「無料トライアルを試してみる」など具体的なアクションが分かるようにCTA(ボタン)を変えてみるのも効果的です。

  3. エラー表示は該当箇所のすぐ下で表示する
    →エラーが起きた際に、ユーザーがすぐに分かるよう項目下にエラー表示をするとユーザーへの負荷を最低限に抑えることができます

  4. 「*」ではなく「任意項目」「必須項目」と表示する
    →できる限りテキストに落とし込んであげることでユーザーのフォームに対する理解を深められます

  5. 送信ボタンをわかりやすく
    →前回お話した通り、送信ボタンの色合いやテキスト内容は重要です。出来る限り反対色を使って目立たせるのと、具体的なCTA(ボタン)に変えると効果的です

  6. スマホ対応ができているか確認
    →提供商品にもよりますが、現在では、流入の50%ほどがスマホです。レスポンシブでスマホ対応されていないとユーザー側としても問い合わせる気になりません。出来る限りスマホ上でも問題ないデザイン・構成を心がけましょう。

 

一旦、上記の様な形でまとめてみましたが、いかがでしたでしょうか。

長くなってしまいましたが、これらを一つ一つ丁寧に実行していけば、問題なく自社ウェブサイトのコンバージョン数を上げることが可能です。

 

前編を呼んでいない方はこちら

wirebase-nakamura.hatenablog.com

 

ということで、引き続きWEBに関するご相談はLINEにてお待ちしております。

 中村LINE↓

友だち追加

【完全版】これさえやれば必ず成果が出る!ウェブサイトのコンバージョン率が上がる必勝法(前編)

 

どうも。株)WIREBASEの中村です。

 

今回は、弊社が実際にクライエントにご提案した具体例も踏まえて、これだけさえやればWEBサイトのコンバージョン率を必ず高められる方法を紹介したいと思います。

今回は前編ですが、後編はこちら↓

wirebase-nakamura.hatenablog.com

 

本当はお金をもらってやるレベルの内容なので、あまりブログでは公開したくなかったのですが、、、これを読めば貴方もWEBサイトのコンバージョン率向上施策について他社にコンサルできるレベル、もしくはチェックリストに沿って実行すれば必ず成果は出るので、是非活用してみてください。

 

先ずは、WEBサイトのコンバージョン率を高めるために絶対やるべきチェックリストを以下に記しますね。このチェックリストに沿って具体例も踏まえて一つ一つ丁寧にご説明していきます。

<ウェブサイトのコンバージョン率を高める施策チェックリスト>

  1. クライエントからの与件を整理する
  2. WEBサイトを分析して理解する
    • 誰が、どこから、どのように流入しているか分析する(アクセス解析
    • WEBサイトの問題点を見つける(ページ解析)
  3. ウェブサイト全体の構成を改善する
    • ユーザーが知りたい情報を簡素化して提供する
    • ユーザーとのコミュニケーションに重視した文章表現
    • ユーザーの「なりたい」を想起させる画像を挿入
  4. ウェブサイトの動線を改善する
    • 動線を簡素化してクリック数を減らす
    • コンバージョンポイントを増やす
    • コンバージョンポイントの構成やデザインを改善
  5. 問い合わせフォームを改善する
    • 問い合わせフォーム入力に係るユーザーの作業負担を軽減する
    • 個人情報を提供する際の不安感を払拭する
    • 問い合わせフォームの構成やデザインを改善する

 

1. クライエントからの与件を整理する

今回の提案に限らず、クライエントに何らかのサービスを提供する時、クライエントの悩みや問題をしっかり把握しておくとうのは重要なことですよね。

ただ単に「コンバージョン率を上げたい」という要望だけをヒアリングするのではなく、お客様のニーズ(悩み)を、できる限り分解して構造化/具体化してあげることが重要です。

ヒアリングの方法はプロジェクトの内容によっても異なりますが、代表的なのは、5W1HWho(だれが)When(いつ)、Where(どこで)、What(なにを)、Why(なぜ)、How(どのように)に沿ってヒアリングすると、漏れなくクライエントの悩みを定義してあげることが可能になります。

 

例えば、、、

  • 流入数に比べて著しいコンバージョン数を獲得できていないため改善策が必要

だけではなくて、下記のレベル感まで分解してお悩みを定義してあげます。

  • 現行LPで一定量流入は獲得できている
  • しかし、流入数に比べて著しいコンバージョン数は獲得できていない現状
  • 現状の分析から以下2点の問題があると特定済み
    • LPトップでの離脱率が高い
    • 問い合わせフォーム入力途中での離脱率が高い
  • 従って、更なるトライアル数増加に向けて主に以下の内容を改善
    • LPトップの全体/テキスト構成の改善
    • LPトップから問い合わせページへの動線改善
    • 問い合わせページの全体構成/デザイン改善
  • 上記の改善を実施することでコンバージョン数の更なる向上を目指す

 

お客様の悩みをきちんと汲み取って、構造化/具体化してあげることで、自分自身の理解度を確かめる、今後の施策の方針を決める上でも、とても大切です。

 

2. WEBサイトを分析して理解する

2-1. アクセス解析

施策を立てる前に、先ずは自身のWEBサイトについて詳しくなりましょう。競合のことは知り尽くしているのに、自身のウェブサイトに関してはあまり理解できていない方も多いのですが、この分析フェーズを飛ばしてしまうと、的外れな施策になってしまい成果も出なくなってしまいます。

 

先ず、以下の視点でターゲットユーザーのアクセス解析を行います。

①誰が流入しているのか?

➁どんなキーワードで検索しているのか?

③どのような意図で検索しているのか?

 

①誰が流入してきているのか?

サーチコンソールやGoogleアナリティクス等のツールを使って、どのようなユーザーが流入しているのか、を把握しましょう。上記の様なツールでは、「40代/男性」くらいの解像度の低い解析しかできませんが、自身の仮説ベースで詳細なペルソナ(例:40代/男性/中小企業/経営管理職 など)を組み立てておくことも重要です。それによってターゲット層(コンバージョンしやすいユーザー)のアクセスが増え、自然とコンバージョン数の増加にも繋がります。

 

➁どんなキーワードで検索しているのか?

これは、サーチコンソール上でCVキーワード(コンバージョンキーワード)を把握することができます。(サーチコンソールのホーム画面→”検索パフォーマンス”→”ページ”タブ→該当するページをクリック)

 

 

例えば、「今後伸びる産業 分析」等のキーワードであれば、30~50代の中小企業の経営企画や大企業の新事業開発部の担当者、などある程度どのようなユーザーが流入しているのか、が特定できたりします。また、どのキーワードで検索したユーザーがコンバージョンしやすいか、も分かるので、上記で特定したペルソナとキーワードをもとにコンテンツを修正していくと、自然とコンバージョン数が伸びてきます。

 

③どのような意図で検索しているのか?

分析をする上で、これが最も重要な視点です。仮説で構わないので、30~50代/中小企業/経営企画の担当者が、どのような意図で「今後伸びる産業 分析」というキーワードで検索しているか、考えてみる必要があります。

 

例えば、中小企業の新規事業開発部の担当者であれば、

  • 「新しい事業を企画しているけど、今後どの分野/領域に参入すれば良いのか分析したい」
  • 「自社の既存ノウハウを活用できて、今後伸びていく産業を特定したい」

みたいに様々な意図を持って検索していることが考えられます。

その意図をしっかりと汲み取ることでより良いコンテンツの作成が可能になり、コンバージョン率向上に繋がるのです。

 

上記①~③の情報を勘案して以下の様なリストを完成させてみてください。

  • ユーザー属性①:30~60代/中小企業/経営企画
  • 検索キーワード①:「成長産業、分析」
  • 意図①:新しい事業を企画しているけど、今後どの分野/領域に参入すれば良いのか分析したい

  • ユーザー属性➁:XXX...

これくらいまで落とし込むことができたら、ユーザーをしっかり理解できている、ということです。ある程度ユーザーが理解できてきたところで、次はウェブサイト内部で発生している問題に関して分析を進めます。

 

2-2. ウェブサイトの問題点を分析して特定する

コンバージョン率が低下している原因を探り適切な対処を見出す必要があります。問題点を見つけるのも、Google Analyticsを使えば、ページ毎のクリック数や遷移率を表示してくれるので、それをもとに問題のあるページを特定しましょう。

f:id:Shinji0418s:20210216003743p:plain



たとえば、上の図では、「サービスカテゴリ―ページからサービス紹介ページへの遷移率は15%と、他のステップと比較しても低い」ということがわかります。これくらい具体的に、ウェブサイト内部のどこに問題があるのかを把握できたら、施策の組み立てに入ります。

 

さて、前編では、①与件整理、➁アクセス解析、③ページ解析、主にこの3つを行うことで、自社WEBサイトに関して理解が深まったのではないでしょうか。

 

特にアクセス解析によって、誰が、どのように、どんな意図で流入してくるのか、が見えてきましたし、ページ解析によってWEBサイト内部のどこに問題があるのか、を特定できました。

 

後編では、具体的に分析結果も踏まえてどのように施策を構築するのか、を説明していきたいと思いますので、引き続きよろしくお願いします。

後編はこちら↓

wirebase-nakamura.hatenablog.com

 

それでは、本日はここら辺で。

 

WEBに関するご相談はLINEにてお待ちしております。

 LINE↓

友だち追加