キンスキ.com

kintone大好きなサイボウズ営業が、プライベートでも紹介していくブログ

ブログタイトル

うわ...私のキントーン、文字多すぎ...? 画像で魅せる活用技をご紹介!

皆さんこんにちは、kinotne大好き松井です。

今回は画像を使った活用向上のTips!文字が多いキントーンを、画像を使った視覚的な説明に置き換えていきます。

JavaScriptやAPIの知識は不要!ライトコースでもできるkintoneの裏技です。ぜひお試しください。

うわ...私のkintone、文字多すぎ...?

使い方を説明したくて、ラベルの文章が長くなる。コレ、kintoneあるあるです笑

ただ、それで利用者がスルーしてしまうと意味がありません。それなら、文章を画像にするのはどうでしょう。視覚的に注意を惹くことができますね。

例えばラベルならこんな感じ。なかなかイイ感じですね!

f:id:tme0503:20180829141712p:plain:w500
ラベルフィールドで説明を作る


あれ、画像添付できたっけ?

ここで違和感を感じたあなたはkintoneにお詳しい方です。なぜなら、ラベルフィールドは画像の添付ができないからです。

f:id:tme0503:20180829150914p:plain:w400
あれ、添付機能が無い。。


標準機能ではできません。しかし、裏技を使えばできちゃうんです。

JavaScriptとかAPIとかムズカしい話はナシ!誰でもできる「コピペ」で画像を表示します。

基本はリッチエディターにコピペ

先に、今回のベースになる技を紹介します。それは「リッチエディターにコピペ」です。

全ての技はコピーしたものをペーストするだけでできます。どういうことでしょうか。

具体的に、必要な簡単3ステップを説明します。

手順1:画像アプリを用意

コピペするには、元の画像をどこかに保存しなければいけません。まずは「画像アプリ」を作りましょう。

アプリは「添付ファイル」フィールドがあれば、他は何でも構いません。大事なのはみんなが見えること。アクセス権限が無いとエラーになるため、権限は解放しましょう。

f:id:tme0503:20180829142209p:plain:w500
テンプレートの「ファイル管理」でもOK


手順2:画像をコピー

アプリができたら、早速画像を添付します。コピーするのは、サムネイルをクリックした先の画像です。

kintoneに添付した画像は、サムネイルをクリックすると大きくなりますよね。サムネイル自体をコピーすると画像が粗くなるためご注意を。

f:id:tme0503:20180829142520p:plain:w500
背景が黒くなるのが目印


手順3:画像をペースト

そして最後。画像を使いたいリッチエディターでペーストをしましょう。基本的にはこの3ステップ。簡単ですよね? 

f:id:tme0503:20180829142859p:plain:w500
ただペーストするだけですw


リッチなところ

この技が使える場所ってどこでしょうか。「リッチエディターがある場所」なので、実は意外とあります。

  • ラベル
  • アプリの説明欄
  • リッチエディター
  • コメント
  • ポータルの本文
  • スペースの本文

おお、結構色々な用途で使えそうですね。では、場所別にどんなイメージになるのかを紹介しましょう。

ラベル

最初にも紹介しましたが、アプリの説明欄として使えます。ステップを円で表現するだけで、印象が大きく変わります。

f:id:tme0503:20180829143647p:plain:w500


アプリの説明欄

「アプリの説明」は使っているでしょうか。例えば関連アプリのリンク表示などに利用ができるでしょう。

f:id:tme0503:20180829143735p:plain:w500


リッチエディター フィールド

ただの静止画だけでなく、動きのあるGIFも使えます。

例えばアプリのリッチエディターフィールドに使えば、こんなブログ風の記事が作れます。Q&Aなどで有効な方法です。

f:id:tme0503:20180829144412g:plain:w500


コメント

画像から離れますが、コメントに添付ファイルを貼る手法もあります。

メンション先の人に「本文のファイル見て!」と言っても伝わりにくいです。そこで、本文の添付ファイルをコピペして、擬似的にファイル添付っぽく見せます。

f:id:tme0503:20180829144554p:plain:w500


ポータル・スペースの本文

最後にポータルです。画像は標準機能で貼れるのですが、段組みができません。あればもっと綺麗になるのに。。

そこで、Wordの「表挿入」機能を使って段を作りました!

f:id:tme0503:20180829145833p:plain:w500


詳細は以前に記事を作りましたので、ぜひこちらをご覧ください。

サイズをいい感じにする

この技を使っていると「画像が大きい問題」が発生します。元の画像サイズ大きいと、貼った先でも大きいままです。

f:id:tme0503:20180829153357p:plain:w400
で、でかい...


このサイズを良い感じに調整する技もあるので、簡単編と発展編の2つで紹介します!

簡単編:画像のサイズを小さくする

まずは単純な方法、画像を小さくしましょう。

最近はWebで画像サイズを小さくするツールがたくさんあります。「画像を縮小する!」とか「I♡IMG」ですね。

Googleで「画像 縮小」と検索すると色々と出てくるので、ぜひ自分にあったツールを探してみてください^^

発展編:Chromeの開発者ツールを使う

次は少し難しいお話。Chromeの開発者ツールを使って、画像の大きさを変更します。

開発者ツールとは、設定の「その他のツール → デベロッパーツール」で表示されます。

f:id:tme0503:20180829160127p:plain:w500


選択モードで画像を選択し、サイズを変更。それからリッチエディターの編集を終了して、保存するとその大きさになります。

f:id:tme0503:20180829155117p:plain:w500


開発者の方にはお馴染みのツールですが、一般の方には正直ハードルが高い方法です。。

それでもチャレンジされたい方は、こちらのページなんかが参考になるかと思います。

綺麗にした効果

画像で見た目を綺麗にする目的はただの自己満足ではありません。私の環境では明らかな効果がありました。

ポータルは改善前に比べてクリック数が増大。アプリによっては最大限3.8倍の効果がありました。


見栄えを良くすることのメリットは、管理者・ユーザー双方にあると言えます。

まとめ

いかがだったでしょうか、画像で魅せる活用術。とても試しやすいTipsだと思うので、ぜひ皆様の環境でも使ってみてください。

最後に重要なご案内。これらの技は全て公式のサポート対象外です。今後のバージョンアップで、動作しなくなる可能性があります。ご注意ください。

ただ、データをイジる方法ではないため、万が一の場合もレイアウトが崩れる程度に収まるとは思います!笑

それでは次の記事でお会いしましょう!