キンスキ.com

kintone大好きなサイボウズ社員が、開発ナシの活用情報を紹介するブログ

ブログタイトル

ポータルを変えるとkintoneが使われる!? 開発無しの裏技で素敵なポータルを作ろう

f:id:tme0503:20180614095803p:image

「kintoneをみんなに使って欲しい-!」

管理者なら誰もが抱える悩みです。導入はした、便利なアプリも作った、でも皆使ってくれない。。ナンデナンデ!?

それ、アプリに気付いてないだけかもしれません。kintoneはアプリ整理の機能がないため、実は悩みやすいポイントなんです。

今日ご紹介するのは、実際に私が試した解決策。ポータルを使い活用度を高める方法をご紹介します!

使われなくて悩んでいた

簡単に私の立場を説明します。私はサイボウズの代理店営業で、先方との情報共有にkintoneを利用しています。アカウント数は700以上、結構多いです。

f:id:tme0503:20180614095827p:image

しかし、人数の割に使われていない。。活用度が低いことが悩みでした。

そこで注目したのがポータルです。ポータルはログインして最初に見る場所。そこに目を惹くガイドがあれば自然と使ってくれるはず。

デザイン機能の限界

kintoneのポータルにはデザイン機能があります。ただ色付けや画像添付くらいで、ちょっと物足りないんですよね。当時のポータルもこんな感じでした。

f:id:tme0503:20180614095842p:image

個人的には見る気が失せるデザインです。ちょっと野暮ったすぎる。。端末の画面サイズによってはレイアウトが崩れることもあります。これをさすがに見ない笑

 

Wordで段組みを作る

この野暮ったさ、段組み機能があるだけでも違います。カラムともいいますが、行と列を作る機能です。kintoneにはこれがありません。

ないなら付け足すのがkintone流。今回は開発無し、Wordを使って段組を実現します。とっても簡単なので、作り方を動画にまとめました。

ね、簡単でしょ?kintone製品ブログではWordのテンプレートファイルも公開してます。自分好みの段を作っちゃいましょう!

デザイン調整Tips

ここからはもっと細かく調整したい人向け!私は結構コマい人なので、色々と調整方法を研究しました。同じような人は参考にしてください。

パワポで作るアイコン画像

ポータルには貼るアイコンはwebのフリー素材を使いましょう。私のオススは「FLAT ICON DESIGN」。今風なアイコン画像がたくさんあります。

ここの画像をそのまま使うのもアリです。私は微調整がしたいので、素材にして別の画像を作っています。例えば、こんなリボン付アイコンとか。 

f:id:tme0503:20180614102727p:plain

アイコンはパワポで作っています。枠やタイトルを付けて、リボンも図形です。選択して「画像保存)で出来上がりです。

f:id:tme0503:20180614114403p:plain

アイコン画像は圧縮がオススメ!

キレイなアイコンをたくさん並ぶと表示速度に影響が出ます。1つのサイズが小さくても塵も積もれば何とやら。

そんな時は画像の圧縮をしましょう。私の御用達は「COMPRESS PNG」です。Googleで「PNG 圧縮」と調べれば色々出てくるので、使いやすい物を探してみましょう^^

画像サイズの調整

kintoneにアイコンを貼ってみると、大きさがしっくり来ないことがあります。標準機能では設定できるサイズパターンが決まっていて、良い具合になりません。

そこでブラウザの機能を使い、指定されているサイズを変える裏技を紹介します。

 

ポータルの編集画面を開いたら、Chromeのデベロッパーツールを開きます。これはエラーチェックなどで使われるツールですが、一部HTMLの書き換えもできます。

f:id:tme0503:20180614085402p:image

枠で囲ったのがデベロッパーツールです。(下に出ることもあります。)

f:id:tme0503:20180614085710p:image

ツール左上の矢印ボタンを押してから、サイズを変えたい画像をクリックします。マウスを当てると色が変わるはずです。

f:id:tme0503:20180614085827p:image

ツールの中にカラフルな四角があります。中心に「数字 × 数字」があり、この数字を変えると画像サイズも変わります。終えたらしい保存を押して、編集画面を閉じましょう。

f:id:tme0503:20180614090046p:image

この方法を応用すると、Wordで作った段も調整できます。ペーストした最初は枠幅が結構大きいです。これは文字の上下に余白が挿入されているから。画像のオレンジが余白ですね。

f:id:tme0503:20180614090112p:image

同じく矢印アイコンを押して選択すると、カラフルな四角に先ほどと違う数字があります。この外枠にあるのがmargin(余白)です。この数字を調整して良い感じにしましょう。(今思えばWord側で調整もできそう)

f:id:tme0503:20180614090729p:image

自分のやり方を見つけましょう!

いかがだったでしょうか、kintone機能ではない裏技が盛り沢山でしたね笑 他にも裏技はあると思います。もっと便利で簡単な方法があればぜひ教えてください^^

最後にこれらはあくまで裏技になります。kintoneのサポート対象外になるため、自己責任でご利用ください。とはいえ、開発ではないためデータが壊れることはありません。アップデートでレイアウトが崩れることがあるかもしれません。

 

 ※ご紹介した内容はOSやブラウザにより動作が異なる場合があります。

  私の動作環境はMac OS X High Sierra / Chrome です

 

新しいTipsを追加しました

ポータル以外の魅せ技も追加しました!ぜひ、こちらも併せてご覧ください^^ (2018/8追記)