Sharepointで使えるボタン効果のあるWebパーツをご紹介します。
モダンUIが出て以降、日に日にWebパーツの種類が増えています。以前はスクラッチのHTML/CSSやJavascriptで表現しないとできなかったことが少しずつできるようになっています。
ウェブページでよく使われるリンク表現の一つにボタンがあります。SharepointのモダンUIでもボタン効果のあるWebパーツがあるので今回それを取り上げてみます。
ウェブサイトでボタンを設置する意図
リンクの視認性を上げる手段の一つがボタンです。
Sharepointでリンクを貼るWebパーツはいくつもあります。テキストリンク以外に選択肢を用意しているのは、リンクの視認性を高めて目的のアクションを取ってもらうためです。
| Webパーツ名称 | 内容 |
|---|---|
| リンク | URLを入れると生成される横長カードタイプリンク |
| ボタン | 装飾されたボタンリンク |
| コールトゥアクション | より行動喚起を促す装飾がされたボタンリンク |
| サイト | Sharepointサイトで作る縦型カードタイプリンク |
| 強調表示されたコンテンツ | 閲覧者の属性に合わせたコンテンツが表示される縦型カードタイプリンク |
| ニュース | Sharepointページをさまざまな大きさで表示するカードタイプリンク |
| ヒーロー | 任意のリンクで作成するさまざまな大きさで表示するカードタイプリンク |
最近はパソコン以外でもポータルコンテンツを見ることもあるでしょう。
スマホやタブレットの場合は、スクロールが容易という観点から「飛ばし読み」の傾向が強くなります。ブログをやっていると、Googleアナリティクスの数字をよく見るのですが、概してパソコンよりもスマートフォンのほうがページ滞在時間が短くでます。
スマホの場合、文字が小さくなるのでしっかりと文章を読まない傾向になります。そのため、自分が読みたいところだけを探す「飛ばし読み」が出やすく、テキストリンクだけだと目に入らないことがあります。
ボタン、バナーなどのリンク形態はそんな時に役立ちます。
Sharepointでボタンが使えるWebパーツ使い方・作成
ボタン
まずは、その名称通りの「ボタン」Webパーツ。ページ編集上では、「ボタン」で呼び出せます。
Webパーツが挿入されたら、画面左上の「✏」マークを押して設定を行います。
▲ 設定する箇所は次の通り。
- ラベル：ボタン上に表示させる文字列
- リンク：遷移先のWebページなど
- ボタンの配置：左・中央・右のいずれか
設定内容はシンプルです。遷移先を新しいブラウザタブで開くなどの指定はできず、同一タブ内でのリンク遷移となります。
ボタンの配色はSharepointサイトのテーマで使わている配色が自動設定されるので、任意の色を選ぶことはできません。
セクションを併用すれば横並びボタンもできる
ページ編集の画面左の「＋（プラスボタン）」からセクションのレイアウトを変更できます。
▲ セクションレイアウトを変更することで、ボタンを2つ3つと横並びにすることもできます。
コールトゥアクション
こちらもボタン的なWebパーツ。
ウェブ業界で使われる用語で、サイトの訪問者に、期待した行動に誘導することを意味する言葉、「行動喚起」とも略されます。「メーリングリストに登録してもらう」「資料を請求する」などボタンやバナーで表現することが一般的となっています。
このブログにもところどころにCTAを置いています。時にはほかの記事へ誘導したり、またある時は紹介したい商品にアクセスしてもらったりと意図はその時様々ですが、サイトを運営すると意識してCTAを使います。
Sharepointでは？という感じになりそうですよね。会社規模で閲覧が多いページで何らかのキャンペーンページや注意喚起で使う感じでしょうか。閲覧者への確かな行動をとってもらいたい場面でコールトゥアクション（CTA）を使うと有効です。
ページ編集上では、「ボタン」と押すと候補として表示してくれます。
「コールトゥアクション」Webパーツの構成は次の通りです。
- ボタン
- 補足文章
- 背景画像
▲ Webパーツが挿入されたら、画面左上の「✏」マークを押して設定を行います。設定内容はボタンWebパーツと全く同じです。
▲ 黒い部分には、補足文章を入れます。デザインがいまひとつ冴えないですが、マイクロコピーということでしょうか。マイクロコピーは、リンクを押させたいときに最後の一押しを文章で表現するものです。これもWeb業界ではよく使われています。
私も紹介したいリンクによく入れることがあります。ボタンの下に置いているのはマイクロコピーです。利用者へのメリットを提示します。
Udemy（ユーデミー）の特徴
- コロナ禍でもオンラインで手軽に学べる
- 趣味にビジネスに豊富なジャンル
- 動画は買い切り・繰り返し視聴可能
- PCでもスマホでも見れる
- コンテンツのクオリティが高い
「✏」マークを押した状態から、背景画像も入れれます。
▲ 使い方は画像ライブラリと変わりません。ストック画像も使えます。
画像の拡大、縮小、フォーカスポイントの調整など融通が利くようです。
コールトゥアクションの機能的にはこんな感じです。
カウントダウンタイマー
「カウントダウンタイマー」Webパーツにも、コールトゥアクションが含まれていたのでついでに紹介します。
▲ 機能はみたまんま、目的となるイベントまでの時間をカウントダウンします。
日付と時刻、タイマーの表示を指定します。オプションでコールトゥアクションが指定でき、ボタンを設置できます。
話それますが、楽天のポイントプログラムを理解してお買い物マラソンに参加するとポイントがザクザクと貯まります。
最近、コンビニ支払いはほとんど楽天ポイントですんじゃってます。
参考 お得すぎる楽天SPU
まとめ
Sharepointで使えるボタン効果のあるWebパーツを投稿しました。
普通のテキストリンクでいいよ、という方も多いでしょうが、マイクロソフトも昨今のWebトレンドを入れてくれているのでしょう。引き続き、新しいWebパーツのリリースを期待します。
