意識高い系のコワーキングスペースが月額2,000円〜 全国規模で店舗も多くてテレワークが捗る!(詳細はリンク先にて)

Sharepointでボタンが使えるWebパーツ使い方。リンクの視認性をあげる一工夫。

Sharepointでボタンが使えるWebパーツ使い方。リンクの視認性をあげる一工夫。 SharePoint
スポンサーリンク

Sharepointで使えるボタン効果のあるWebパーツをご紹介します。

モダンUIが出て以降、日に日にWebパーツの種類が増えています。以前はスクラッチのHTML/CSSやJavascriptで表現しないとできなかったことが少しずつできるようになっています。

ウェブページでよく使われるリンク表現の一つにボタンがあります。SharepointのモダンUIでもボタン効果のあるWebパーツがあるので今回それを取り上げてみます。

スポンサーリンク

ウェブサイトでボタンを設置する意図

リンクの視認性を上げる手段の一つがボタンです。

Sharepointでリンクを貼るWebパーツはいくつもあります。テキストリンク以外に選択肢を用意しているのは、リンクの視認性を高めて目的のアクションを取ってもらうためです。

リンクとして機能するWebパーツの一例
Webパーツ名称 内容
リンク URLを入れると生成される横長カードタイプリンク
ボタン 装飾されたボタンリンク
コールトゥアクション より行動喚起を促す装飾がされたボタンリンク
サイト Sharepointサイトで作る縦型カードタイプリンク
強調表示されたコンテンツ 閲覧者の属性に合わせたコンテンツが表示される縦型カードタイプリンク
ニュース Sharepointページをさまざまな大きさで表示するカードタイプリンク
ヒーロー 任意のリンクで作成するさまざまな大きさで表示するカードタイプリンク

最近はパソコン以外でもポータルコンテンツを見ることもあるでしょう。

スマホやタブレットの場合は、スクロールが容易という観点から「飛ばし読み」の傾向が強くなります。ブログをやっていると、Googleアナリティクスの数字をよく見るのですが、概してパソコンよりもスマートフォンのほうがページ滞在時間が短くでます。

スマホの場合、文字が小さくなるのでしっかりと文章を読まない傾向になります。そのため、自分が読みたいところだけを探す「飛ばし読み」が出やすく、テキストリンクだけだと目に入らないことがあります。

ボタン、バナーなどのリンク形態はそんな時に役立ちます。

Sharepointでボタンが使えるWebパーツ使い方・作成

ボタン

Sharepointでボタンが使えるWebパーツ使い方

まずは、その名称通りの「ボタン」Webパーツ。ページ編集上では、「ボタン」で呼び出せます。

Sharepointでボタンが使えるWebパーツ使い方(鉛筆マークから設定を行う)

Webパーツが挿入されたら、画面左上の「✏」マークを押して設定を行います。

Sharepointでボタンが使えるWebパーツ使い方(設定はシンプルそのもの)
設定はシンプルそのもの

▲ 設定する箇所は次の通り。

  • ラベル:ボタン上に表示させる文字列
  • リンク:遷移先のWebページなど
  • ボタンの配置:左・中央・右のいずれか

設定内容はシンプルです。遷移先を新しいブラウザタブで開くなどの指定はできず、同一タブ内でのリンク遷移となります。

ボタンの配色はSharepointサイトのテーマで使わている配色が自動設定されるので、任意の色を選ぶことはできません。

セクションを併用すれば横並びボタンもできる

ページ編集の画面左の「+(プラスボタン)」からセクションのレイアウトを変更できます。

▲ セクションレイアウトを変更することで、ボタンを2つ3つと横並びにすることもできます。

コールトゥアクション

こちらもボタン的なWebパーツ。

コールトゥアクション(CTA)とは

ウェブ業界で使われる用語で、サイトの訪問者に、期待した行動に誘導することを意味する言葉、「行動喚起」とも略されます。「メーリングリストに登録してもらう」「資料を請求する」などボタンやバナーで表現することが一般的となっています。

Sharepointでボタンが使えるWebパーツ使い方(Web業界では一般的に使われているCTA)
Web業界では一般的に使われているCTA

このブログにもところどころにCTAを置いています。時にはほかの記事へ誘導したり、またある時は紹介したい商品にアクセスしてもらったりと意図はその時様々ですが、サイトを運営すると意識してCTAを使います。

Sharepointでは?という感じになりそうですよね。会社規模で閲覧が多いページで何らかのキャンペーンページや注意喚起で使う感じでしょうか。閲覧者への確かな行動をとってもらいたい場面でコールトゥアクション(CTA)を使うと有効です。

Sharepointでボタンが使えるWebパーツ使い方(呼び出し方はボタンと同じ)
呼び出し方はボタンと同じ

ページ編集上では、「ボタン」と押すと候補として表示してくれます。

Sharepointでボタンが使えるWebパーツ使い方(コールトゥアクションの構成要素)

「コールトゥアクション」Webパーツの構成は次の通りです。

  • ボタン
  • 補足文章
  • 背景画像
Sharepointでボタンが使えるWebパーツ使い方(鉛筆マークで設定を開始する)
Sharepointでボタンが使えるWebパーツ使い方(使い方はボタンパーツとほぼ同じ)

▲ Webパーツが挿入されたら、画面左上の「✏」マークを押して設定を行います。設定内容はボタンWebパーツと全く同じです。

Sharepointでボタンが使えるWebパーツ使い方(黒い箇所は補足文章を入れる)


▲ 黒い部分には、補足文章を入れます。デザインがいまひとつ冴えないですが、マイクロコピーということでしょうか。マイクロコピーは、リンクを押させたいときに最後の一押しを文章で表現するものです。これもWeb業界ではよく使われています。

私も紹介したいリンクによく入れることがあります。ボタンの下に置いているのはマイクロコピーです。利用者へのメリットを提示します。

超強力なオンラインマーケットプレイス「Udemy」

Udemy(ユーデミー)の特徴

  • コロナ禍でもオンラインで手軽に学べる
  • 趣味にビジネスに豊富なジャンル
  • 動画は買い切り・繰り返し視聴可能
  • PCでもスマホでも見れる
  • コンテンツのクオリティが高い
\ 動画は買い切り!繰り返し視聴可能! /
Sharepointでボタンが使えるWebパーツ使い方(背景を指定できる)

「✏」マークを押した状態から、背景画像も入れれます。

Sharepointでボタンが使えるWebパーツ使い方(画像ライブラリ)

▲ 使い方は画像ライブラリと変わりません。ストック画像も使えます。

Sharepointでボタンが使えるWebパーツ使い方(画像のフォーカスを変更できる)

画像の拡大、縮小、フォーカスポイントの調整など融通が利くようです。

コールトゥアクションの機能的にはこんな感じです。

カウントダウンタイマー

「カウントダウンタイマー」Webパーツにも、コールトゥアクションが含まれていたのでついでに紹介します。

▲ 機能はみたまんま、目的となるイベントまでの時間をカウントダウンします。

日付と時刻、タイマーの表示を指定します。オプションでコールトゥアクションが指定でき、ボタンを設置できます。

時間の指定は、太平洋標準時となります。日本時間から−17時間引いた時間を指定します。

話それますが、楽天のポイントプログラムを理解してお買い物マラソンに参加するとポイントがザクザクと貯まります。

最近、コンビニ支払いはほとんど楽天ポイントですんじゃってます。

参考 お得すぎる楽天SPU

まとめ

Sharepointで使えるボタン効果のあるWebパーツを投稿しました。

普通のテキストリンクでいいよ、という方も多いでしょうが、マイクロソフトも昨今のWebトレンドを入れてくれているのでしょう。引き続き、新しいWebパーツのリリースを期待します。

error: Content is protected !!
タイトルとURLをコピーしました