ページが見つかりませんでした - 株式会社イロコト https://irokoto.co.jp エンタメ/キャンペーン系のWebサイト制作を得意としています。 Tue, 05 Mar 2024 03:18:31 +0000 ja hourly 1 https://wordpress.org/?v=5.7.2 Figmaデザインルールの周知とテンプレートの活用 by イロコト内デザイン分科会 議事録#04 https://irokoto.co.jp/blog/20240305/post-42 https://irokoto.co.jp/blog/20240305/post-42#respond Tue, 05 Mar 2024 03:18:31 +0000 https://irokoto.co.jp/?p=4095 イロコトデザイナーのaoです。「デザイン分科会」の議事録シリーズの第4回目をお届けします。

今回は主にFigamデザインルールを改めて周知やテンプレートの活用について共有しました。

 

1.Figmaデザインデータの命名で「/」を使用しない

フレーム、セクション、グループなど、全てにおいて「/」は使用しないことにしましょう。「/」を使用すると、Figma側のプログラムが反応し意図しない処理が走ってしまうことがあります。例えば、画像のエクスポートで自動でフォルダ分けされてしまうなど。日付の表現は「20240301」など、「/」を使用しないようにしましょう。

 

 

2.フォントサイズの最小はPCで10px、SPで20px

ブラウザで10px以下が表示できないためPCデザインは10px以下、SPデザイン(Retina対応で2倍で作成時)は20px以下を使用しないようにしましょう。ルビで特に使用してしまいがちなので注意する必要があります。最新のChromeだと10px以下も表示できるようですが、お客様やユーザーのブラウザ種類に依存することになるため、基本的に最小フォントサイズはPCで10px、SPで20pxとしましょう。

どうしても10px以下でないと成り立たない場合は、フォントをSVG等画像化して使用すると良いでしょう。下記の映画サイトではスタッフ情報をフッター下に小さめに入れて欲しいと依頼があり、画像化して収めました。
映画「文豪ストレイドッグス BEAST」公式サイト

 

 

 

3.Figmaオートレイアウトを多用しすぎない

オートレイアウトの中にさらにオートレイアウトを指定するなど多用しすぎると、コーディング時にマージンを確認し辛い、Figmaファイルが重くなってしまうなど弊害があります。同じオートレイアウト内に、微妙な違いのあるマージンを指定したい際は任意の高さで作成した「塗り/線なし」のレクタングルをコンテンツ間に設置し、オートレイアウトのマージンを「0」に指定するやり方もおすすめです。

 

さらに、マージンの高さに指定したレクタングルをコンポーネント化しておけば、一括管理することができて便利です!

 

 

 

4.イロコト制作ワイヤーテンプレートをご紹介

イロコトではオリジナルのワイヤーテンプレートを活用しています。あらかじめ使用頻度の高いUIを用意しておき、組み合わせることでその案件に合ったワイヤーを作成できます。非デザイナーの社員でも簡単にFigmaでワイヤーを作ることができ、工数の削減が可能になります。また、誰が作成しても一定のクオリティを担保できます。

 

ディレクター、デザイナー間で使用感を共有し、「あのパーツがあった方がいい」「このコンテンツ幅を基準にしたい」など定期的にブラッシュアップしていきます。

 

サムネイルあり、なしに対応したNEWS一覧ワイヤーテンプレート

 

ゲーム・アニメ案件の多いイロコトならではの「キャラクターページ」テンプレートも!

 

 

 

5.現在のX仕様に対応したOGPシミュレーターをご紹介

2024年3月現在、XでサイトをシェアするとOGPの左下に黒い帯と共にサイトタイトルが表示されます。Xでシェアして参加するキャンペーンサイトなど、OGPの全貌をはっきりと見せる必要がある場合はこの箇所に重要な情報を設置しないように気を付ける必要があります。

 

そこでイロコトでは、タイトルが表示される場所をマークしたシミュレーターを作成しました。作成したOGPをこちらのフレームに当てるだけで、Xでシェアされた際のイメージをシミュレーションすることができます。

 

 

 

以上、次回のデザイン分科会をお楽しみに!

]]>
https://irokoto.co.jp/blog/20240305/post-42/feed/ 0
デザインの考え方と地味に使えるFigmaショートカットby イロコト内デザイン分科会 議事録#03 https://irokoto.co.jp/blog/20240227/post-41 https://irokoto.co.jp/blog/20240227/post-41#respond Tue, 27 Feb 2024 06:11:59 +0000 https://irokoto.co.jp/?p=4041 イロコトデザイナーのタナカです。今回は「デザイン分科会」の議事録シリーズの第3回目をお届けします!

 

今回の分科会では細かなデザインの考え方の統一と、新しく見つけた地味だけど結構使えるFigmaショートカットを共有しました。

 

1.フッターの外部リンクアイコン、つける?つけない?

フッター内の「プライバシーポリシー」などには外部リンクアイコンつけた方が良いと思うが、SNSの場合はどうするのが適切かという議題が上がったので、考え方のすり合わせをしました。

 

フッターの外部リンクアイコンについて

  • SNSの場合は外部に飛ぶことがわかるので不要
  • 並列に置かれているリンクの中に、外部サイトに飛ばすものが混在している場合はアイコンつけたほうがわかりやすい
  • 外部リンクアイコンが連続してしつこい場合は、アイコンの透明度下げるなどで対応

 

考え方としては上記ですが、お客様からのご要望や全体のバランスを見て違和感がある場合は適宜調整するといった感じで認識のすり合わせを行いました。

 

2.全身絵(全体絵)を表示するボタンの矢印の向きについて

弊社ではよく対応するキャラクターの全身絵切り替え。
基本的に矢印ボタンで対応することが多いのですが、その矢印の向きは外側・内側どちらが良いのかという議題が上がりました。

 

  • 全身絵をサイト表示より小さく見せる時は、内向きの矢印アイコンにする
    例)悪魔王子と操り人形
  • 全身絵をサイト表示より大きく見せる時は、外向きもしくはその他のアイコン(虫眼鏡やプラス)にする
    例)ティンクルスターナイツ

 

全身絵をサイト表示より小さく見せる場合
全身絵をサイト表示より大きく見せる場合
例に挙げた二つのサイトのように、アイコンを使い分けることで直感的に分かりやすくなるのではという意見でまとまりました。

 

3.何それ知らなかった…!地味に使えるMacFigmaショートカット

作業していく中で「こんなのあったの!?」となるようなショートカットがデザイナー陣の中でちらほらと出てきました!
いちいち調べるほどではなかったけれど、知っていたら結構便利なショートカットをご紹介します。

 

  • shift + X → 塗りと線を逆転させる
  • cmd⌘ + 矢印キー → サイズを調整可能(shiftを押しながらだと10ずつ)
  • cmd⌘ + shift+ V → 書式をそのままペースト
  • cmd⌘ + L → フレームのリンクがコピーできる
  • option + cmd⌘ + enter → プレビュー画面が開く

 

痒いところに手が届く…。デザインしていると出てくる地味に面倒な作業がショートカットで解決できます!

これからも分科会の内容を不定期でご紹介していきますので、ぜひお楽しみに!

]]>
https://irokoto.co.jp/blog/20240227/post-41/feed/ 0
コーディングに配慮したデザインについて考えてみた by イロコト内デザイン分科会 議事録#02 https://irokoto.co.jp/blog/20240130/post-39 https://irokoto.co.jp/blog/20240130/post-39#respond Tue, 30 Jan 2024 02:18:41 +0000 https://irokoto.co.jp/?p=3949 イロコトデザイナーの伊藤です。今回は「デザイン分科会」の議事録シリーズの第2回目をお届けします!

 

イロコトでは週に1回、社内のデザイナーたちが自身の制作したデザイン発表やツールの使用方法の情報交換などを分科会で行っています。

 

その内容をまとめて発信するブログシリーズの第1回目ではFigmaのTipsをメインにご紹介しましたが、今回はコーディングも考慮した社内デザインルールの見直しについての議題が多くなりました。

 

イロコトでは普段どのような視点を持ってデザインを行っているのか?より効率的に制作を行うためにはどんな点に注意をすればいいのか?この記事を読めばイロコトデザイナーの思考を垣間見ていただくことができると思います!

 

1.フッターのリンク集は日本語と英語どちらで表記するか?

フッターの要素の一つである「プライバシーポリシー」「運営会社」といったリンク集。その表記について、メニューのテキストが英語の場合はリンク集も英語の方が良いのではないか?リンクであることを示すデザインとしての下線は本当に必要なのか?という声が社内で挙がったため、改めて考え方の認識を統一した。

 

 

  1. メニューが英語表記で、リンク集も英語で意味が伝わりやすいテキストの場合は表記を英語に統一する。
    例1)「Site Policy」「Privacy Policy」「Contact」など
  2. 英語では伝わりにくい内容の場合は日本語で表記する。
    例2)「運営会社」「著作権について」「二次創作ガイドライン」など
  3. 下線はなくてもいいが、リンクであることが伝わるようにデザインで配慮する。
    例3)アイコンを挿入する、色を変えるなど)

 

 

英字の表記は統一すること。

デザインによって全て大文字が良いケースもあえば、小文字が良いケースもあるが、サイト全体でどちらかに統一してデザインする。

 

パンくずリストの表記も迷った際には同様の基準に則って行う。サイトの目的やデザインに合わせ、フッターまで思考を持って論理的にデザインを行う。

 

2.総ルビでデザインをする際の注意点

文中のすべての漢字に読み仮名を振る「総ルビ」のサイトでは、一つ一つのルビをspanタグでマークアップしている。

 

そのため、改行位置をPCとスマートフォン両方のデザインで統一しなければ、spanタグで囲む位置も変更が必要になってしまう。

 

総ルビデザインの注意点の例

 

効率的なコーディングのためにも、デザイン段階で留意して制作をする。

 

3.ニュース詳細の見出しはどこまで作るか?

見出し自体はhタグで1〜6まで作成可能だが、お客様のご要望やコンテンツの性質によってはh6まで使用しないケースも少なくない。

 

どのレベルまで見出しを駆使して運用されるかによって、ニュース詳細の見出しもどこまで制作すべきかを判断する。

h4以降も必要な場合は以下の基準でデザインを作成する。

 

  • h1~h3:サイトのデザインに沿った装飾やあしらいで目立つように作成する。
  • h4〜h6:内容の情報を邪魔しないよう、色味やシンプルなあしらいで強調する。

 

4.ページネーションの数字は先頭に「0」をつけない

ニュースページのページネーションは、数値をプラグイン管理している。

その仕様上、桁数を0で埋めて調整する「ゼロパディング」の実現が難しい。

 

PHPやJavaScriptを駆使した力技で再現することも可能ではあるが、重要度が高くない場合はページネーションの数字で先頭に0をつけないように配慮する。

 

まとめ

昨今では、デザインやコーディングの品質向上と効率化だけではなく、アクセシビリティやユーザビリティへのさらなる配慮も重要視される傾向が高まっているため、社内ルールもアップデートし続けていく必要があります。

 

これからも分科会の内容を不定期でご紹介していきますので、ぜひお楽しみに!

 

 

]]>
https://irokoto.co.jp/blog/20240130/post-39/feed/ 0
Figmaの便利な使い方をデザイナー同士で共有した by イロコト内デザイン分科会 議事録#01 https://irokoto.co.jp/blog/20240111/post-38 https://irokoto.co.jp/blog/20240111/post-38#respond Thu, 11 Jan 2024 12:47:47 +0000 https://irokoto.co.jp/?p=3861 イロコトデザイナーのさいとーです。

 

弊社では週に1回、社内のデザイナーが集まって「デザイン分科会」を行なっています。

 

自身でデザインしたサイトについて、デザイン時に込めた想いや意図、参考にした事、こだわった事などを発表し合って言語化能力を鍛えたり、デザインツール(Figma)の使用方法やアップデートで変更した点などを共有し合っています。

 

また、弊社ではデザイナーとコーダーが別れているため、コーダーが実装しやすいデザインファイルに仕上げるための情報共有なども行なっております。

 

今回は、過去のデザイン分科会で話した内容をいくつかまとめてみました。最新のFigmaの話が多いため、Figmaを使用してデザインを行なっているデザイナーさんは必見です!

 

 

1.Figmaでドロップシャドウをつける際の注意点(box-shadow、filterの違い)

CSSで影をつけるとき、「box-shadow」と「filter:drop-shadow() 」の2つの実装方法がある。

 

box-shadow は、要素の輪郭(フレーム)にシャドウをつけたい場合に使用し、filter:drop-shadow() は、要素の形(凸凹)に沿ってにシャドウをつけたい場合に使用。

 

飛び出した装飾が付いていたり、欠けたりしているオブジェクトにCSSで影をつける場合は「filter:drop-shadow() 」を使うことになるため、グループで囲う&グループにドロップシャドウを設定する

 

 

また、複雑な形状をしたボタンは画像書き出しになるので、画像書き出しエリアにドロップシャドウをかけてはいけない。(CSSでつけたいので)

画像書き出しエリアをグループ化して、そのグループにドロップシャドウをかけるよう気を付ける。

 

 

▼本件をまとめた画像

 

2.Figmaのフォントを斜体にするプラグイン

Figmaはフォントを斜体にする機能がデフォルトで存在しないため、これまでは「skew dat」というプラグインでフォントを斜体にしていたが、プラグインが有料化した。

 

無料で使えてフォントを斜体にできる他のプラグインを探した所、「Skew 360°」というプラグインがあった。感覚的に操作ができて便利なので、こちらのプラグインを使うことをオススメ。

 

▼Skew 360°
https://www.figma.com/community/plugin/1288423133657605450

 

 

3.Figmaのフォント選択の機能

フォントの選択画面で、「このファイル内」のタブから「人気のフォント」「Googleフォント」など絞り込みができて便利。

 

フォント名を手打ち入力していたメンバーがいたので、分科会で共有。

 

 

4.Figmaのオートレイアウトの使い方

オートレイアウトを使用する時は、必要最低限を心がける。

 

同じ要素を一定のマージンで置きたい場合にオートレイアウトを使用しても良いが、不要な箇所でオートレイアウトを使用すると階層が深くなりすぎてコーダーさんが大変になるので考慮する。

 

1pxの仕切り線は、コーダーさんが把握しやすいようにレクタングルで作成する。

 

また、ワイヤーフレームは極力オートレイアウトやコンポーネントは使わないようにする。先方とお打ち合わせしながらワイヤー調整する時に、複雑化して大変になるため。

 

 

5.デザインのブラッシュアップの考え方

MASKMAN Inc.のデザイナーさんのnote記事が、デザインをブラッシュアップするまでの過程が丁寧に言語化されておりとても良かったので、デザイナーは必読。
https://note.com/maskman_inc/n/n6cc7ed6a7523

 

このデザインで「らしさ」が十分に出ているのか、他の商品に置き換えてもデザインが成立しないか、デザイナー自身が自問自答を繰り返しブラッシュアップを行う姿勢が大切

 

 

6.ワイヤーフレームのパーツ作成

ディレクターがワイヤーフレームを作成する際、文字の大きさ、要素の大きさなどに悩むことがある。

 

そのため、ワイヤーフレームで使用できるパーツをデザイナーが作成し、パーツをコピペしてワイヤーフレームを作れるよう効率化する。

 

※イロコトではお客様の方でサイトのイメージがつきやすくなるよう、ワイヤーフレームの段階でフォントサイズ、画像サイズなどをデザインに近づけるよう意識して制作をしています。

 

▼ニュースページで使用できるパーツリストの例

 

まとめ

今回はFigmaの使い方に関する共有が多めの分科会となりました。

現場で活躍しているデザイナー達の情報共有のためニッチな内容ではありますが、デザイナーのレベルアップ・デザイン作業の効率化を目標に、これからも分科会を行って参ります。

 

今後も不定期にデザイン分科会で話した内容を公開しますので、お楽しみに!

 

 

▼おまけ

分科会で話す内容は、デザイナー各個人が日々の業務の中で気づいたことを書き込んで決めています。

 

]]>
https://irokoto.co.jp/blog/20240111/post-38/feed/ 0
イロコト流!Figmaでエンタメ系サイトのキャラ量産方法のススメ https://irokoto.co.jp/blog/20231220/post-37 https://irokoto.co.jp/blog/20231220/post-37#respond Wed, 20 Dec 2023 06:03:52 +0000 https://irokoto.co.jp/?p=3577 こんにちは、デザイナーのaoです。

 

イロコトはゲーム・アニメのサイト制作経験が多数あり、ノウハウやTipsが豊富にあります。中でもキャラクターページは、作品の魅力を伝える重要なページの一つであり、その多くが華やかで凝ったデザインです。しかし、特にゲーム作品ではキャラクター数が20名、30名、多いと100名を超えることもあり、どうしても制作に時間がかかってしまいます……。

 

イロコトではデザインツールをPhotoshopからFigmaに完全移行したことで、キャラクターページをより効率的に作成するための方法を確立しました!(Figma完全移行の詳細はこちらの記事をご参照ください。)

 

今回は少しニッチな内容となりますが、そんなイロコト流のFigma活用法をお教えします!ブログ内で紹介しているFigmaデータは下記のコミュニティで公開していますので、ぜひご参照ください。

https://www.figma.com/community/file/1273210528761691507/irokoto-characterpage-tips

 

 

イロコト流Figmaキャラ量産の手順

1.キャラクター画像の準備

まずはデザインに使用するキャラクター画像を準備します。PCデザイン、SP(スマートフォン)デザインにおいて同じ画像を使用するため、サイズの大きい方に合わせて作成しましょう。小さいサイズに合わせてしまうと、画像が荒れてしまいます。

 

Figmaに全てのキャラクター画像をインポートしたら、一番サイズの大きいキャラクターを基準に、横幅と高さが全て同じになるようにフレームで囲みます。(※ページデザインによっては、キャラクターごとに高さを可変させる場合もあります。)

 

その際、以下の点に注意しましょう。

 

  • 汎用性を持たせるため、フレームの値は一番大きいキャラクター×1.5〜2のサイズにします。
  • 顔の位置・大きさが、全キャラ同じ程度になるよう調整します。この時、基準のキャラの顎下にガイドを引くとわかりやすいです!

 

 

2.バリアントを活用

全てのキャラクター画像をフレームで囲んだら、コンポーネント化し「バリアントとして結合」を実行します。バリアント結合したコンポーネントは、パネルから「プロパティ」タブを変更し他のキャラクター画像への切り替えが可能になります。

 

 

3.プロパティの切り替えで量産

バリアント結合したキャラ画像はプロパティを切り替えれば全キャラ同じ大きさ・位置に表示できるため、1キャラ分ページデザインを作成したらプロパティ切り替えでサクサク量産できます。

 

キャラ画像の差し替えが発生した場合も、メインコンポーネントを変更するだけで全ての箇所を一括で差し替えることができ、修正時間の短縮に繋がります。

 

 

 

トラブルシューティング

サイズ変更が他バリアントに反映されない

インスタンスのサイズを変更したあとにプロパティを切り替えた際、サイズ変更前の大きさに戻ってしまうことがあります。その原因はメインコンポーネントの「制約」が拡大・縮小以外が設定されているためです。

 

コンポーネントを作成したら、必ず「制約」を拡大・縮小に設定しましょう。この設定がされていないと、サイズの変更が効かないのでご注意ください。

 

動作が重くて作業がしづらい

インスタンスは、レイヤー上では1枚のキャラ画像が1ページずつ表示されているように見えますが、仮に70点の画像をバリアント化していた場合、実際は残りの69枚も非表示状態で存在している状態になります。そのためバリアント数やページが増えると、莫大な量の画像がファイル内に存在していることになってしまいます……。

 

解決策として、キャラクター数が多い場合やページ数が多くなる場合は下記に注意してファイル容量が重くなりすぎないようにしましょう。

 

  • 支給されたキャラクター画像が高解像度の場合、解像度を72dpiにするなどWeb上で最適なサイズにしてからFigmaにインポートする。
  • Figmaはページ毎に容量の制限があるため、使用しているページが重くなりそうなら別ページを作成して管理する。もしくは、ファイルそのものを新しく作成して管理する。
  • バリアントとして結合する画像が30点を超える場合はコンポーネントを複数に分け、インスタンス切り替えを併用する。

 

まとめ

バリアントは本来、デフォルト・ホバー・無効など状態違いのUIパーツを一括管理するために使用される機能ですが、イロコトではゲーム・アニメサイト上でのキャラクターページをより効率的に作成するために活用してみています。

 

他にも、エンタメ系に強いWeb制作会社だからこそ発信できるTipsがたくさんありますので、次回の更新もお楽しみに!

]]>
https://irokoto.co.jp/blog/20231220/post-37/feed/ 0
診断サイトでX(旧Twitter)でトレンドを狙うコンテンツプロモーションをしてみませんか? https://irokoto.co.jp/blog/20231214/post-36 https://irokoto.co.jp/blog/20231214/post-36#respond Thu, 14 Dec 2023 07:59:29 +0000 https://irokoto.co.jp/?p=3821 こんにちは、デザイナーのタキです。

 

アニメやゲーム、その他のコンテンツでもSNSプロモーションが欠かせない時代。

 

『X(Twitter)でのインプレッションを伸ばすため、またトレンド入させるために何のキャンペーンをやればいいんだろう?』と思った経験のあるプロモーション担当の方も多いのではないでしょうか?

 

そんなプロモーション担当者様に是非オススメしたいのが、『診断サイト』制作です!

 

プロモーション担当者様からすると、

 

「プロモーション開始まで時間がない...」

「金額が高いと費用の捻出が難しい...」

「そもそも診断サイトって本当にプロモーション効果あるの?」

と思う方が多いのではないでしょうか?

 

そこで弊社イロコトでは、診断サイト制作をゼロベースからでも一通りお任せができる『診断サイト制作サービス』を開始いたしました!

 

診断サイトを制作したいと思ったがどこに頼んだらいいのか分からなかった方、そもそもイロコトがこのようなコンテンツを制作していたことを知らなかった方、ぜひイロコトに診断サイト制作をお任せください!

 

「診断サイト制作サービス」のサービスサイトでは、より詳しい費用や制作の流れ、弊社の診断サイトの実績を掲載しておりますので、下記よりご覧ください。

 

▼診断サイト制作サービス

https://shindan.irokoto.co.jp/

 

こちらのブログでは弊社イロコトでの診断サイトコンテンツの実績を踏まえながら、診断サイトをおすすめする理由を事例を交えてご紹介いたします。

 

 

takt op.(タクトオーパス)パートナー診断

スマートフォン向けアプリゲーム「takt op.(タクトオーパス)」のキャラクターの中から、自分がどのキャラクターと似ているかがわかる診断サイトを制作させていただきました。

 

診断サイトの公開から多くのユーザーの方に診断・シェアいただき、X(Twitter)でのトレンド入りを達成し大きな反響を呼びました。(→実際のX(旧 Twitter)でのユーザー投稿についてはこちら)

 

トレンド入りができた要因はコンテンツ力もありますが、ユーザーがX(Twitter)にシェアするまでの導線やシェアをする時の投稿文言が影響しています。弊社イロコトではこのような「トレンド入りしやすい」診断サイトが制作できますので、ぜひお気軽にお問い合わせください。

 

 

診断サイト本体のデザインをこだわって制作することはもちろん、弊社イロコトでは「X(Twitter)にシェアされた時」のデザインを重要視しています。

 

診断サイトを制作する上で欠かせないのが、OGPデザインです。OGPデザインとは投稿にURLが含まれている時に表示される画像のことで、主にユーザーが診断結果をシェアする際に表示されます。

 

この診断サイトのOGPデザインでは全体的な雰囲気を各キャラクターに寄せつつ、キャラクターの絵と名前を大きく見せています。そうすることで、X(Twitter)のタイムラインで見栄えが良く、ユーザーの目に留まりやすいOGPデザインとなっています。

 

▼実際のサイトはこちら

https://shindan.takt-op.jp/

 

 

ウルトラマン 6兄弟診断

アニメ「ULTRAMAN SEASON2」のスマートフォン向け『6兄弟診断』を制作させていただきました。ウルトラマンの世界観を取り入れ、サイト内の文言も「診断結果ジェアッ!(シェア)」とウルトラマンらしさを演出しています。

 

この診断サイトはデザインとしてはスマートフォンのみを制作し、PCで見た際にはスマホデザインが中央に置かれて表示される仕様となっております。そのため、PCとスマートフォン両方の見え方でサイトを制作するレスポンシブデザインよりも費用を抑えて診断サイトを制作することが可能です。

 

スマートフォンのみのデザインにしてX(Twitter)でのシェアを狙うことで、多くのユーザーの方に診断をしてもらい、制作費用対効果を最大化することができました。(→実際のTwitterでのユーザー投稿についてはこちら)

 

もちろんレスポンシブ対応の診断サイトも制作いたしますので、お気軽にお問い合わせください。

▼実際のサイトはこちら

https://anime.heros-ultraman.com/6brothers/

 

 

診断コンテンツはイロコトにお任せください!

このブログでは2つの実績を紹介させていただきましたが、他にも弊社で制作している診断サイトコンテンツは多数ありますので、詳細は下記の診断サイト制作サービスサイトをご覧ください。

 

▼診断サイト制作サービスはこちら!

https://shindan.irokoto.co.jp/

 

またイロコトではコンテンツに合わせて、診断コンテンツ以外のプロモーションサイトも作成していますので、「どんなプロモーションが効果的なんだろう?」とお悩みのご担当者様も是非お気軽にお問い合わせください。

 

▼お問い合わせはこちら

https://irokoto.co.jp/contact/

 

SNS上のみのプロモーションではなく、サイト側のコンテンツも合わせたコンテンツプロモーションなら是非イロコトまでご相談ください!

]]>
https://irokoto.co.jp/blog/20231214/post-36/feed/ 0
画像ジェネレーターサービスを1日で開発→公開をしてみた https://irokoto.co.jp/blog/20230918/post-35 https://irokoto.co.jp/blog/20230918/post-35#respond Mon, 18 Sep 2023 02:55:46 +0000 https://irokoto.co.jp/?p=3728 イロコト代表の穂刈です。

突然ですが、画像ジェネレーターサービスを1日で開発してみました。

 

#食べるぜニッポン!画像ジェネレーター
https://irokoto.co.jp/taberuze-card/

 

農林水産省の下記のポストがX(Twitter)上でバズっていたのですね。

 

透過PNG的なのを画像に合成するのは、スマートフォンのみだとちょっとハードルあるなと思ったのと、弊社では下記のようなゲーム系プロモーション向けの画像ジェネレーターサービスをいくつか担当させていただいていた実績がありましたので、画像の簡易合成的なものなら、静的ですぐ作れそうだなと思い、社内メンバーに相談してすぐ開発をしてみました。

 

▼ゆめせかカメラ
https://camera.yume-sekai.com/

 

▼ラグナロクオンライン SS漫画カードメーカー
https://ragnarokorigin.gungho.jp/generator/comic-card/

 

1度、とにかくスピード重視で開発してみるというのはやってみたくて、これは良い機会だと思いつきでやってみたのですが、それなりに反響もあって実際に使った方も何名か見受けられたので、良い経験になりました。

 

本当は、合成する「#食べるぜニッポン!」のフォント画像の大きさや位置を変えるというのも可能で、それを出来た方が良いことは分かっていたのですが、それよりスピードを最優先してみました。

 

時にクオリティよりスピードを重視してやるというのもありだと思っていまして、弊社がメイン領域でやらさせていただいておりますエンタメ系(ゲーム・アニメ等)は、割とスピード重視でやると効果がでやすい施策というのは多々あります。

 

このような画像ジェネレーター・メーカー系のサイトを制作してみたいという企業担当者様がいらっしゃいましたら、随時お仕事のご相談いただけましたら大変幸いでございます。

 

安く早く!みたいのも可能ですし、しっかり楽しんでもらえるように質を高めて公開していくことも可能です! 企画提案して欲しい的なご相談も歓迎でございます!

 

▼お問い合わせはコチラからお気軽に!
https://irokoto.co.jp/contact/

 

弊社イロコトでは、このようなWebコンテンツに関するサービスサイトはもっと強化していきたいと考えていますので、今後も様々なサービスサイトの展開をご紹介予定です。

]]>
https://irokoto.co.jp/blog/20230918/post-35/feed/ 0
AIをWeb制作のフロントコーディングで試したら色々分かってきた件 https://irokoto.co.jp/blog/20230531/post-34 https://irokoto.co.jp/blog/20230531/post-34#respond Tue, 30 May 2023 17:07:00 +0000 https://irokoto.co.jp/?p=3437 こんにちは、ばやしです。

 

皆さんは生成AIを活用していますか?
私は趣味でも仕事でも活用しています。

 

画像生成AIや音声のスタイル変換、ストーリーテリングなど色々と試していますが、今回はコーディングにおける生成AIの活用について、AIの奴隷を自称している私目線でどんな使い方をしているかなどを紹介します。

 

※生成AI周りは日々進化しているので情報が古くなっているor間違っている可能性があります。内容を鵜呑みにしないようにしてください。

 

※サムネイルの背景はDreamStudioで生成したものです。

 

コーディングの役に立つAIについて

 

コーディングに活用できるものとしては汎用型のAIチャットボットと、プログラミング補助に特化したAIツールの2種類が挙げられます。

 

汎用タイプはChatGPTGoogle BardBing AI、特化タイプはGithub CopilotAmazon CodeWhispererTabnineなどがありますね。(Bing AIとGithub CopilotはChatGPTと同じOpenAIとの共同開発、TabnineもGPT-2ベースのモデルを使用している?)

 

性能はChatGPT(GPT-4)が抜けているように見え、シェアもChatGPTが優位ではないでしょうか。

 

独占状態になるのはあまり好ましくないと思うので他のオープンソースプロジェクトなどにも期待したいですが、莫大な学習データと莫大な演算装置が必要なためか、同等の性能を実現するのは中々難しいのかもしれません。

 

具体的な活用方法

今までは分からない事があったらGoogle検索するor人に聞くという流れが普通でしたが、その過半数がChatGPTに置き換わりました。コードの提案だけでなく、仕組みの説明なども出力してくれるのがすごくよいです。

 

たまにうまく動かないコードを提案してくる場合もありますが、自分で直すなり修正を依頼するなりで対処しています。

 

以前はGithub Copilotも使用していましたが、ChatGPTで間に合う事が多かったので現在はChatGPTのみを使用しています。(Copilot Xが正式にリリースしたら乗り換えを考えています)

 

主に下記のような使い方をしています。

※例はすべてGPT-4版ChatGPTを使用。出力されたコードが全て正常に動くかどうかはまでは確認していないので悪しからず。

 

特定の機能を持つコードを書かせる

入力例:
「get-content」というIDが設定されているbuttonタグがクリックされた時に、
クリックされたbuttonタグに設定してあるdata-url属性の値(URL)を取得し、
そのURLのページのbodyタグ内の要素をすべて取得し現在のページの「content-wrapper」
というIDの要素の中に展開するコードをVanilla JSで書いて。
出力例:
以下のJavaScriptコードはあなたが述べた動作を行います。
しかし、実際の動作はブラウザのセキュリティ設定や
CORS (Cross-Origin Resource Sharing) 設定により異なる場合があります。

------------------------
// get-contentボタンを取得
var button = document.getElementById('get-content');

button.addEventListener('click', function(e) {
    // data-url属性の値を取得
    var url = e.target.getAttribute('data-url');

    // Fetch APIを使用してURLからデータを取得
    fetch(url)
    .then(response => response.text())
    .then(data => {
        // レスポンスデータからbodyタグ内の内容を抽出
        var parser = new DOMParser();
        var htmlDoc = parser.parseFromString(data, 'text/html');
        var bodyContent = htmlDoc.body.innerHTML;

        // content-wrapper要素を取得し、内容を更新
        var contentWrapper = document.getElementById('content-wrapper');
        contentWrapper.innerHTML = bodyContent;
    })
    .catch(err => {
        // エラーハンドリング
        console.error('Fetch Error: ', err);
    });
});
------------------------
上記のコードは、指定したURLからHTMLを取得し、
そのHTMLのbodyタグ内のすべての要素を現在のページの"content-wrapper"というIDの要素に挿入します。
しかし、このコードが期待通りに動作するかは、いくつかの要素に依存します。
たとえば、要求されたURLが同一オリジンポリシーやCORSの要件を満たしていなければ、
ブラウザはセキュリティ上の理由から要求をブロックします。

この問題を回避するためには、サーバ側で適切なCORSヘッダを設定するか、
またはリバースプロキシを使用するなどの方法があります。
しかし、これらの方法はどちらもサーバ側の変更を必要とするため、ブラウザのみで行うことはできません。

こちらの意図をしっかり理解してくれていて、CORSの注意までしてくれています。

 

やや古い情報を出力してくることがあるので必要に応じてドキュメントを読ませたりWebブラウジングさせると良いと思います。(ChatGPT Plusのみ)

 

「書き方が古い」と伝えるだけでちゃんと書いてくれる場合もあります。予め最新の情報に基づいて出力するようなプロンプトを与えておいても良いかもしれません。

 

コードのエラー理由を説明させる

入力例:
const variable = 10;
variable = 1;
console.log(variable);
このコードでエラーが発生しました。エラーの理由を教えてください。
出力例:
JavaScriptでは、`const`キーワードを使用して宣言した変数は再代入できません。
したがって、`variable = 1;`の行でエラーが発生します。
このエラーは「TypeError: Assignment to constant variable.」というメッセージで
表示されるでしょう。

JavaScriptで変数を宣言するための3つのキーワード
(`var`、`let`、`const`)の違いを以下にまとめます。

`var`: 関数スコープまたはグローバルスコープの変数を宣言します。再代入が可能です。
`let`: ブロックスコープの変数を宣言します。再代入が可能です。
`const`: ブロックスコープの変数を宣言しますが、一度値が割り当てられるとそれ以降その値を変更することはできません。

このケースでは、`variable`の値を再代入したい場合は`let`キーワードを使用して変数を宣言することを推奨します。

------------------------
let variable = 10;
variable = 1;
console.log(variable);  // Output: 1
------------------------
このコードはエラーなく動作し、最終的な出力は1になります。

エラー文言はChromeのものとは違っていますが、内容は正しそうですね。

聞いていないのに変数宣言の方法の概要まで説明してくれていてホスピタリティが高いです。

 

特定のライブラリの使い方を聞く

プラグイン「Link Reader」を使用。

入力例:
https://ja.splidejs.com/guides/options/
https://ja.splidejs.com/guides/getting-started/
https://ja.splidejs.com/guides/structure/
上記のURLを参照して、splide.jsでフリードラッグの横幅500px固定のスライダーを設置する方法を
説明してください。
出力例(※長いため終盤のJS箇所のみ抜粋します):
import Splide from '@splidejs/splide';

new Splide('.splide', {
  width: '500px',
  drag: true,
}).mount();

フリードラッグというワードを理解していないのか「drag: true」になってしまっています(正しくは「drag: "free"」)が、概ね正しいです。

 

情報量が多いと、目的に合致した情報を見つけるまでに時間がかかったりするので、かなり便利な使い方です。リンク先を読ませたり、ブラウジングさせたりが可能になったことがとても大きいです。

 

尚、無料版でもGSAPなど有名なライブラリであれば答えてくれることが多いです。(情報は古い)

 

コードの修正

適当に書きなぐったコードをリファクタリングしてもらったりが可能です。

入力例:
var fileNamesByExtension = {};
var images = document.getElementsByTagName('img');

for (var i = 0; i < images.length; i++) { var image = images[i]; var imageUrl = image.src; // URLから拡張子を取得 var extension = ''; var dotIndex = -1; for (var j = imageUrl.length - 1; j >= 0; j--) {
    if (imageUrl[j] === '.') {
      dotIndex = j;
      break;
    }
  }
  if (dotIndex !== -1) {
    extension = imageUrl.substring(dotIndex + 1).toLowerCase();
  }

  var fileName = '';
  var slashIndex = -1;
  for (var k = imageUrl.length - 1; k >= 0; k--) {
    if (imageUrl[k] === '/') {
      slashIndex = k;
      break;
    }
  }
  if (slashIndex !== -1) {
    fileName = imageUrl.substring(slashIndex + 1);
  }

  if (!fileNamesByExtension.hasOwnProperty(extension)) {
    fileNamesByExtension[extension] = [];
  }

  fileNamesByExtension[extension].push(fileName);
}

console.log('画像のURLと拡張子ごとのファイル名:');
console.log(fileNamesByExtension);
上記のコードをなるべく短いコードに書き直してください。

ページ内の画像URLを取得してファイル名を拡張子別で配列に格納するコードです。

出力例:
あなたの要求に応じて、上記のコードをより短く書き直しました。
以下のコードでは、`Array.prototype.forEach`を使用してループを処理し、
JavaScriptの組み込み関数を使用してURLからファイル名と拡張子を取得しています。

------------------------
// 画像の拡張子ごとにファイル名を格納するオブジェクト
var fileNamesByExtension = {};

// 画像要素を取得して拡張子ごとに分類
Array.from(document.getElementsByTagName('img')).forEach(image => {
  let url = new URL(image.src);

  // URLから拡張子とファイル名を取得
  let [fileName, extension] = url.pathname.split('/').pop().split('.');

  // 拡張子ごとにファイル名を格納する配列を初期化
  fileNamesByExtension[extension] = fileNamesByExtension[extension] || [];

  // ファイル名を配列に追加
  fileNamesByExtension[extension].push(fileName);
});

// 結果を出力
console.log('画像のURLと拡張子ごとのファイル名:', fileNamesByExtension);
------------------------

ここで`Array.from()`は、HTMLCollectionをArrayに変換して`forEach`を使えるように
するために使用しています。

また、`URL`オブジェクトを使用して、URLからパス名を取得し、その後、
`split`関数でパス名をファイル名と拡張子に分割しています。

そして、拡張子ごとにファイル名を格納する配列を初期化し、ファイル名をその配列に追加しています。
最後に、拡張子ごとのファイル名を含むオブジェクトをログに出力しています。

このコードは動作しますが、修正前のコードではファイル名に含まれていた拡張子が修正後は含まれなくなっています。

修正するように依頼した所、正しく修正してくれたので大きな問題はありません。

 

番外編:テストボイスを生成する

弊社はエンタメ系を多く担当しているため、主にゲームやアニメのサイト製作にあたって仮の音声素材が欲しくなる時があります。

 

そういった場合に、ChatGPT Plusの「Speechki」というプラグインが使えます。

以下の文をspeaker_id=850で読んでください。
弊社イロコトをただの「Web制作会社」と言ってしまうと語弊があるかもしれません。
なぜなら弊社の手掛ける事業範囲は、エンタメ系のプロモーション企画を中心として、
それに伴うサイト運用・写真撮影・動画編集・生放送制作・広告代行・SNS運用など多岐に渡っているためです。

 

出力された音声がこちら。
もうAIで何でも出来てしまいますね。凄い時代になりました。

 

文章理解+計算能力比較

 

ChatGPTに何かを直接計算させることは無いですが、文章の論理的な構造を正しく理解してくれるかどうかは重要です。ちなみに上記の画像は間違っています。

 

「太郎は時速3kmで歩きます。太郎が10km離れた書店に向かった時、太郎は10分間歩き、残りは時速100kmの電車を使用しました。電車の乗車時間を求めなさい。」
というテキストを汎用対話型AIに入力してみます。

 

私の算数能力が小学生未満でなければ、5.7分(整数でないのは置いておきましょう)が正解なはずです。

 

ChatGPT (GPT-3.5)

太郎が10分間歩いた時の距離は、時速3km × (10分 / 60分) = 0.5km です。

残りの距離は、10km - 0.5km = 9.5km です。

電車の速度は時速100kmなので、電車の乗車時間を求めるには、
9.5km ÷ 100km/h = 0.095時間 = 5.7分 かかります。

したがって、太郎は電車に乗っている時間は約5.7分です。

合っていますが、間違った回答も結構出力します。

太郎が10分間歩いた場合、彼は時速3 kmで歩いているので、進む距離は以下の通りです:
太郎が歩くのに要した時間は、距離を速度で割ることで求めることができます。
歩いた時間 = 距離 / 歩行速度 = 10 km / 3 km/h ≈ 3.33 時間
10 分は、時間に換算すると 10/60 = 1/6 時間です。
残りの距離は、10 km - 歩いた距離 = 10 km - 10 km = 0 km です。
残りの距離を電車の速度で割ると、電車に乗る時間を求めることができます。
電車の乗車時間 = 残りの距離 / 電車の速度 = 0 km / 100 km/h = 0 時間
したがって、太郎は電車に乗るためには0時間かかります。

何もかも違いますね。8割くらいはこんな回答が来るのでGPT-3.5に論理的な整合性は期待しないほうが良さそうです。

 

ChatGPT (GPT-4)

まず、太郎が歩く距離を計算しましょう。太郎は時速3kmで歩き、
その速度で10分歩いたとのことです。時速を分速に変換すると、
3km/60分 = 0.05km/分となります。したがって、10分歩いた距離は0.05km/分 × 10分 = 0.5kmです。

次に、この歩いた距離を全体の距離(10km)から引くことで、
電車で移動する必要がある残りの距離を計算します。10km - 0.5km = 9.5kmです。

電車の速度は時速100kmなので、この速度で9.5km移動するのにかかる時間を計算することが
求める乗車時間となります。時間=距離/速度の公式を用いると、
9.5km ÷ 100km/時間 = 0.095時間となります。

この時間は時間単位なので、分単位に変換します。0.095時間 × 60分/時間 = 5.7分となります。
しかし、実際の時間計算では分単位は整数であるべきなので、
これを四捨五入すると、おおよそ6分となります。

したがって、電車の乗車時間は約6分と求められます。

合っています。説明が一番詳細ですね。四捨五入までしてくれています。また、何度生成しても5.7分と示してきます。

より高度な計算をしたい場合にプラグインを使用できる点も強力です。

 

Google Bard

太郎が歩いた距離は、10分間 x 3km/時 = 0.5km です。
したがって、太郎が電車で移動した距離は、10km - 0.5km = 9.5km です。
電車の乗車時間は、9.5km / 100km/時 = 0.095 時 = 5.7分 です。
したがって、答えは5.7分です。

合っていますが、誤った回答も出力します。正答率はGPT-3.5と同程度かやや優れているかも?程度です。

 

Bing AI (より厳密に)

太郎は時速3kmで歩き、10分間歩いたので、太郎は0.5km歩きました。
そのため、太郎は電車で9.5km移動しました。
電車の速度は時速100kmなので、電車に乗る時間は
9.5km ÷ 100km/h = 0.095h、つまり約5.7分です。

合っています。
尚、「よりバランスよく」に設定すると全く見当違いな回答ばかり出力してくるので、整合性が必要な場合は「より厳密に」設定で行う必要がありそうです。

 

特化型の補助ツールについて

ここまで主に汎用タイプの対話型AIについて記載してきましたが、特化型のツールもいくつか使用してきたので雑感を記載します。

 

Github Copilot

https://docs.github.com/ja/copilot/quickstart

 

「もうこれで良いんじゃないか?」と思える程度には色々な事に対応できますが、ChatGPT (GPT-4)のほうが性能だけで言えば上だと思います。拡張機能という形でプログラミング用のUIを提供している点ではChatGPTより良いかもしれませんが、ChatGPTの拡張機能も存在するので五十歩百歩でしょうか。

 

挙げた3つの中では、最も日本語での入力に対して適切に反応してくる感触があります。

 

Copilot Xはまだ検証できていませんが、チャット形式で質問できるようになったのは便利そうですね。

 

内部的にはほぼGPT-3〜GPT-4ですので、UIやGithubによるチューニングにどれだけ価値を見いだせるかになりますね。

 

Amazon CodeWhisperer

https://aws.amazon.com/jp/codewhisperer/

 

個人利用であれば無料で使えるという太っ腹なツールです。Amazon関連のソースコードでトレーニングされているためか、AWS系に強いようです。

 

試用した際は無印Github Copilotと似た使用感だと思いました。ただ、対応言語が限られていて、Copilotほどの融通は効かないと思われます。とはいえ主要な物には対応しているので大きく劣るという訳では無いです。

 

また、日本語でのコード生成もある程度可能です。

 

Tabnine

https://www.tabnine.com/

 

2019年頃からあるコード補完ツールですね。この中では最先発といえます。

1行のみのオートコンプリートであれば無料で使えます。

 

Pro版であればCopilotのように指示を入力してコードを書かせたりできますが、私が試した段階では指示の理解度がやや低いように感じました。(書き方が悪かった可能性はあります。また、日本語入力は実用的ではありませんでした。)

 

オフラインで動作させたり、自分のコードで微調整を行ったり出来るようですので、部分的には上記2つより優れているかもしれません。公式ブログで他サービスとの比較を投稿しているので、参照してみてください。

 

上記3つを試した限りでは、特にこだわりが無ければCopilot、AWS環境をよく使う・無料で使いたい等であればCodeWhisperer、社内のコードでのチューニングやオフライン稼働などを使いたければTabnineという印象でした。どのようなプロジェクトでどのような補助を求めているかによって変わってくると思いますし、出来れば実際にいくつか試用して感触を確かめることをおすすめします。

 

問題点について

生成AI自体の問題点については有識者にお任せするとして、コーディング補助として使うにあたっての思い当たる問題点を挙げてみます。

 

出力コードの安全性

セキュアさが重要な実装を行う場合は全面的に頼る(出力コードをそのまま使う)のはやめたほうが良いでしょう。CodeWhispererなどセキュリティスキャンを行えるツールもあるので、そういった機能を活用することである程度リスク回避できそうです。

 

社内のコードをAIに入力すること

私がChatGPTを使う際はそのまま入力することは避けています。

 

基本的には問題ないと思いますが、入力が学習に使用されている場合はそのまま出力されることは無いと分かっていつつも心情的に少し怖いですね。

 

ChatGPT・Github Copilotの場合は学習に使用しないようにする設定がありますのでそちらを有効にすると良いでしょう。

 

AI頼りになって知識が身につかない?

GPT-4が出てきて、それなりに複雑なコードでもまともに動くものを提示してくるようになったので、より活用できる範囲が増えました。

 

これは当人の学習モチベーションに依存すると思っていますが、調べる時間をある程度短縮出来るのでむしろより効率的に学習できるのではないかと思います。

 

もちろん頼りすぎで何も考えずに使うのは良くないですね。

 

結論イロコトではどうするか

社内ではコーダー分科会を開いており、その場では生成AIの話題も話しています。まだ人によって使い方はバラバラですが、今後は全社的に活用を推進していく方向で考えており、コーディング補助に限らず生成AIによる恩恵を案件で有効活用するアイデアを常に模索していきます。既にコーダー以外でも、デザイナーの方でサイト内のキャッチコピーのアイデア出しに活用していたりもしています。

 

AIを活用することで作業を効率化できたり、今まで出来なかったことが出来るようになると良いですね。それではまた。

]]>
https://irokoto.co.jp/blog/20230531/post-34/feed/ 0
イロコトデザイナーに聞く!これしか勝たん!figmaプラグイン7選 https://irokoto.co.jp/blog/20230410/post-33 https://irokoto.co.jp/blog/20230410/post-33#respond Mon, 10 Apr 2023 00:50:45 +0000 https://irokoto.co.jp/?p=3203 こんにちは、デザイナーの社員Bです!
弊社ではデザインをFigmaへ完全移行したことで、業務効率がとても改善されました。

 

Figmaはアップデートを重ねたことで機能面も充実してきましたが、プラグインを使ってさらに業務を効率化しています💪   今回はそんなFigmaがないと生きていけないイロコトデザイナーたちに、これしか勝たん🥺なプラグインを教えてもらいました!

 

01 フォントを『プレビュー』しながら選べる

Font Preview

該当フォントがプレビューで表示されるので、直感的に選ぶことができます。フォント名を検索できるのはもちろん、 打ち込んだ文字がその場でプレビューされるので、フォント選びにかかる時間を短縮できます!

 

 

02 属性に適合する要素を『一括選択』できる

Similayer

フォントのサイズ/ウェイト/カラーなど複数のプロパティに適合する要素を一括で選択してくれるプラグインです。このウェイトを使っているところをまとめて全て修正したい…!というときなどに便利です。

 

 

03 オブジェクトを簡単に『分割』してくれる

Split shape

選択したオブジェクトを指定した数値に合わせて、 均等に分割してくれます。マージンやサイズなどをいちいち計算せずとも簡単にレイアウトを組むことができるので、ワイヤー作成時にとても便利です!

 

 

04 SVGアイコンを『秒』で入れ込める

Iconify

使いたいSVGアイコンを「ドラッグ&ドロップ」で入れ込むことができるプラグインです。シンプルなものから、色のついたものまで多くの種類があるので、アイコンを探す時間を短縮できます!

 

 

05 Photoshopのような『エフェクト効果』ができる

filter/effects

色調やノイズ加工など、細かいエフェクト調整ができます。Photoshopを開く手間が省け、すぐに画像をアレンジして試すことができます。
 

 

06 小数点を1クリックで『整数』 にする

Clean Document

オブジェクトのサイズや位置についている小数点を、ワンクリックで整数(四捨五入)にしてくれます。その他にも、非表示レイヤーを削除してくれる機能などがあり、デザインデータの整理の時間を短縮できます!

 

 

07 長文のテキストボックスを一瞬で『分割』できる

Nisa Text

改行ごとにテキストボックスで分割することができます。複製して並べる手間が省けるので、長文が入るときに重宝しています!分割してオートレイアウトにもできるので、マージンの調整も一瞬です。

 

ここまでデザイナーのおすすめプラグインを紹介しましたが、コーダーさんのおすすめプラグインも教えてもらいました✨

 

 

おまけ 使用中のフォントの種類&ウェイト&数がわかる

Font Fascia

ページ内で使用しているフォントの種類、ウェイト、その数を一覧で出してくれます。インストールすべきフォントが一目でわかったり、不要なフォントやウェイトの整理にも役立ちます!

 

最後に

今回は全部で8つのおすすめFigmaプラグインをご紹介いたしました。

 

エンタメ系Web制作では、賑やかしのために装飾や効果をたくさん使うので、Figmaでデザインすることは難しいと思っていましたが、プラグインを使ったりFigmaのデフォルト機能を駆使していくうちに、裏技的な使い方もたくさん編み出しました😏今後はそんなFigmaの裏技も紹介していきます!
]]>
https://irokoto.co.jp/blog/20230410/post-33/feed/ 0
PhotoshopからFigmaに移行したメリット&デメリット https://irokoto.co.jp/blog/20230330/post-26 https://irokoto.co.jp/blog/20230330/post-26#respond Thu, 30 Mar 2023 08:56:24 +0000 https://irokoto.co.jp/?p=2603 こんにちは、デザイナーのyamaです。

 

突然ですが、みなさんはどんなデザインツールを使用していますか?

 

弊社のデザイナーはこれまで、Photoshopを使用してWebデザインを制作していました。ですが重さや共同編集のしづらさから、一時期はXDの導入を試みたことも。しかし弊社が強みとするアニメやゲームといったエンタメ系のWebサイト制作はPhotoshopの加工機能を使う機会が多く、XDで再現することが難かったため、結局Photoshopに戻ってくる…という状態でした。

 

そんな中、2021年頃から徐々にFigmaを導入してみたところ、様々な課題が解決。現在はPhotoshopでの作業がほぼなくなり、Figmaへ完全移行することとなりました。

 

そこで今回は弊社がFigmaを導入したことで感じた、メリットとデメリットをご紹介していこうと思います。

 

Figma導入のメリット

 

1.デザインがすぐに確認できる

プレビュー機能

Photoshop時代、デザインを確認する際は「画像として書き出し」→「実機確認」→「修正」→「画像として書き出し」…と、確認をするにも一苦労でした。

 

ですがFigmaは、クリックするだけでプレビュー用のURLを発行できるため、そのURLにアクセスすれば、PCブラウザからもスマートフォンからも、すぐにデザインを確認することができます。加えて複数のページでも1つのURLで確認することができるので、各ページごとの比較がしやすくなりました。

 

 

プレビューのリアルタイム反映

Figmaのプレビュー機能は、リアルタイムでデザインを反映してくれるため、PCブラウザ・スマートフォンで確認しながらデザインを調整することが可能です。この機能により、デザイナー同士で意見交換しながら共同編集しつつ、デザインを進めることもできるので、制作の効率化やチームの連携力が高まることに繋がりました。

 

案件によっては、お客様にプレビュー画面を見ていただきながらミーティングをし、リアルタイムで修正作業を行うこともあります。特にアニメ・ゲームといったジャンルでは「作品の世界観」や「設定・モチーフ」などの細かなニュアンス調整を行うことが多々あるため、ヒアリングをしながらデザインの詳細が詰めていけることは、お客様にとっても弊社にとっても、とてもメリットがあると感じています。

 

2.修正がしやすい

Figmaでは修正して欲しい箇所にコメントを残すことができます。明確な指示が出せるので「思っていたところと違う箇所が修正されてしまった」など、コミュニケーションロスを防ぐことにもつながりました。

 

SlackとFigmaを連携することで、コメントが書き込まれた際にSlackへ通知が来るよう設定もできるので、修正の抜け漏れ等の心配がありません。

 

 

3.データ管理が簡単

弊社は社内のデータ共有を社内サーバーGoogle Driveの2つで管理しています。そのためPhotoshop時代は、最新データの同期がとれておらず共有の手間が増えたり、そもそも最新のデータがどこに格納されているかを探すために過去のやり取りを遡って、、などかなり煩雑でした…。

 

その点Figmaは、データがクラウド上で管理されているため、更新のたびにアップロードする必要もなく、常に最新のデータを共有することができます。

 

 

4.圧倒的軽さ

Photoshopを使用していて、動作がカクついて重い、さらにはフリーズor強制終了してデータが飛んでしまった経験はありませんか?(自分はあります)

 

Figmaは圧倒的に動作が軽いです!とにかく軽い!画像枚数が多くてもストレスなく動いてくれますし、上述した通りデータはクラウド上に保存されるため、データ破損の心配も基本的にはありません。

 

アニメ・ゲームサイトでは、キャラクターページを数十名単位で作成することもあるのですが、コンポーネント機能を活用することによって、劇的に作業効率を上げることができました。下記のように、キャラクターの画像自体をコンポーネント化することによって、複数のキャラを作成しやすくしたり、差し替えが発生した際に一瞬で変更できるのは、Figmaならではの強みだと思います。(本来のコンポーネント機能とは、使い方は少し異なりますが…。)

 

 

Figma導入のデメリット

 

1.Photoshopでできたデザインが再現しづらい

ある程度はFigmaでも再現することは可能ですが、どうしても難しい場合があります。そういった場合は特定のパーツなどだけPhotoshopで作成し、Figmaに読み込む形で対応しています。

 

Photoshopから完全に離れることはまだできませんが、デザイナー陣と案件を通して模索したり、Figmaのプラグインを活用して日々クオリティを高めています。

 

2.完全Figma頼りになってしまう

現状Figmaを使用する上で、1番の課題と言えるのが、Figma依存です。

 

過去に何度かありましたが、Figmaはクラウド上でデータ管理をしているため、Figma自体のサーバーが落ちた場合、作業することができなくなります。最悪データが飛んでしまうケースなども考えられるため、ローカル保存は定期的に行わないといけません。

 

最後に

今回はFigma導入したメリット・デメリットについてご紹介いたしました。まだFigma自体の課題はありますが、実際に導入してみて、現場の効率は劇的に良くなりました。

 

また去年の9月にAdobeがFigmaを買収したことも話題となりましたが、今後どうアップデートしていくのか、引き続き情報を追っていこうと思います。

 

Figmaはデザインツールとしてはもちろん、資料作成にも利用する方も増えてきているので、業界問わず様々なシーンで利用されるかと思います。弊社でも今後Figmaに関する社内のノウハウを発信予定ですので、お楽しみに。

]]>
https://irokoto.co.jp/blog/20230330/post-26/feed/ 0
ゲーム系のWebサイト制作でTwitterトレンド入りをさせる? 3つの実績事例をご紹介 https://irokoto.co.jp/blog/20230103/post-32 https://irokoto.co.jp/blog/20230103/post-32#respond Tue, 03 Jan 2023 12:11:30 +0000 https://irokoto.co.jp/?p=3044 イロコト代表の穂刈です、小栗旬と同い年の40歳です。

 

弊社では、ゲーム系のWebサイト制作・運用を多く担当させていただいておりますが、お客様が何のためにWebサイト制作を検討されるかというと、大きく言えば「プロモーションのため」となる場合が多いかと思います。

 

ゲームのプロモーションとなると、例えばリワード広告だったり、SNS広告やYouTube広告の出稿だったり、メディア媒体のPR記事といった「直接広告費用をかけてプロモーションする」といったものを検討されることが多いですよね。

 

また直接広告費用をかけないやり方だと、YouTubeで声優さんが中心となった動画や生放送を公開したり、SNSの定期運用となるケースが多く、Webサイト制作はプロモーション貢献度が低いと思われがちです。

 

実際の所、Webサイトを作る"だけ"ではプロモーション効果は薄いです。 ゲームサイトにおいて情報アーカイブとしてWebサイトを活用することも大事なことですが、Webサイトはただ作れば良いということではなく「いかにコンテンツプロモーションとしてサイトを活用するか?」「他の広告やコンテンツといかに絡めて行くか?」を考えて制作・運用をすることが重要だとイロコトは考えています。

 

では、どのようにゲームのWebサイトをプロモーション活用していくかですが、現在のゲームプロモーションにおいてTwitterは話題拡散の上で非常に重要で、いかにTwitterで定量的なエンゲージメントを上げられるかは常に考えておく必要があります。

 

特に「Twitterトレンド入り」が出来ると、ゲームの直接的なコア層だけでなく、ミドル~ライト層にリーチできる可能性を大きく高めることが出来るため「Twitterトレンド入り」は、ゲームプロモーションの1つの目標となることも多いです。

 

ということで、これまでイロコトにて担当をさせていただきましたゲームのWebサイト制作において、Twitterトレインド入りをしてプロモーションに大きく貢献できた事例を紹介いたします。

 

1.ゆめせかカメラ(カードジェネレーター)

https://camera.yume-sekai.com/

 

スマートフォン向けアプリゲーム「夢王国と眠れる100人の王子様」と「夢職人と忘れじの黒い妖精」のコラボレーションを記念したカードメーカー(ジェネレーター)サイトです。

 

Webサイト上で自分の推しキャラクターの推したい場所をデコってカードを生成でき、Twitter上で投稿できるというWebサイトコンテンツとなっています。キャラクター総数は数千以上となっており、簡単にカードが作れるということもあり多くのユーザーの方からご好評をいただいた結果、Twitterトレンド入りをすることができました。

 

ゆめせかカメラトレンド入り

※お客様側の生放送番組内で声優さんに「ゆめせかカメラ」を使って遊んでもらうコーナーを作っていただけたのも大きかったかと思います。(引用:【夢世界シリーズ】夢100×ゆめくろコラボ!『ゆめせか生放送』)

 

ゆめせか生放送の様子

Twitterでは下記のような多くのユーザーコメント反応が出ることになり、プロモーションに大きく貢献ができたWebサイトと言えるかと思います。(Twitterタイムラインより引用)

 

またAppBankの記事で取り上げられたことで、よりユーザーリーチを拡められる結果になったのではないかと考えています。

 

参照:【夢100】オレの推しを見ろぉ! 神企画「ゆめせかカメラ」で遊んでみた【ゆめくろ】

 

リリースをしてからもユーザーの方から使用されていることもあり、中長期的にも良いコンテンツと言えそうです。Twitter反応についてはハッシュタグ#ゆめせかカメラを見ていただくと様子が理解しやすいかと思います。

 

 

2.トリニティトリガー ゲーム公開前ティザーサイト

https://www.trinity-trigger.com/teaser/

 

Nintendo Switch、PS5、PS4等にて発売されたの王道RPG「TRINITY TRIGGER(トリニティトリガー)」のゲーム公式サイト公開前のティザーサイトのコンテンツプロモーション実績です。

 

トリニティトリガーティザー

完全新作オリジナルのゲームで、発表前段階でどうにかプロモーションが出来ないか?と考えていたのですが「敢えてゲームタイトルを明かさずに、ユーザーにゲームタイトルを当てさせるキャンペーン」というプロモーションコンテンツにするという企画を考えてサイトを公開した所、知名度0からのスタートでもTwitterトレンドに入りの結果を出すことができました。

 

画像

 

その時のTwitter上での反響が下記です。「ゲームタイトルを当てるヒントがPDFで見れるゲーム企画書の中に書いてある」等の細かお言及したくなるようなネタを仕込んだサイト制作をすることで、Twitterでのユーザーコメントでは下記のような多くの反応が出ることになり、大きくプロモーションに貢献ができたWebサイトとなりました。(Twitterタイムラインより引用)

 

現在は既にタイトルが公開されているためTwitterカードが当時のものとは違うものになっていますが、#トリトリ のハッシュタグを過去に遡ると当時の様子を確認することもできるかと思います。

 

またファミ通.comでこの施策に関してのプレスリリースを取り上げていただいたのも大きかったかと思います。

 

参照:謎に包まれた新作RPGのティザーサイトが公開!

 

 

3.ガルパクイズ王サイト

https://bang-dream.bushimo.jp/garupa-quiz/

 

スマートフォン向けアプリゲーム「バンドリ! ガールズバンドパーティ!」の「ガルパクイズ王」の特設サイトです。

 

数問のクイズがあるだけではなく、初級編など4つの難易度から全75問のクイズに挑戦でき、正答数に応じて何級・何段などの称号が貰え、Twitterにシェアできる画像も全て違うというサイト設計にすることで、広告をかけずにTwitterトレンドで1位を取ることできました。(ハッシュタグ #ガルパクイズ王 で過去の反応を確認できます。)

 

この時に、数多くのユーザーの皆さんが下記のようなツイートを投稿されていました、ここのTwitterカードのクリエイティブは非常に重要ですね。(Twitterタイムラインより引用)

 

 

クイズ・診断系のWebサイトコンテンツはTwitterのプロモーションにおいては相性が良く、他多くのゲームで展開されている王道のコンテンツではありますが、Twitterトレンド入りをさせるのは有名なIPであっても簡単なことではなく、SNSの運用とWebサイトコンテンツの作り方と見せ方など細かい慣れとノウハウが必要になります。

 

 

最後に

今回は3つのゲームWebサイトのコンテンツ制作事例をご紹介いたしました。ちなみにどのサイトもPCサイト用のデザインは制作しないで、スマートフォンファーストのデザインにすることで、より費用対効果を良くしているのがポイントです。

 

こちら以外にもイロコトでは多くのゲームサイト制作の実績がありますので、ゲーム宣伝のご担当者様で話を聞きたいという方は、弊社のお問い合わせフォームよりご連絡くださいませ。

]]>
https://irokoto.co.jp/blog/20230103/post-32/feed/ 0
イロコトのPR漫画を「かけだしちゃん」に描いてもらいました https://irokoto.co.jp/blog/20220911/post-31 https://irokoto.co.jp/blog/20220911/post-31#respond Sun, 11 Sep 2022 03:33:20 +0000 https://irokoto.co.jp/?p=2843 イロコト代表の穂刈です。

 

「未経験から100話でキラキラWEBデザイナーを諦めるかけだしちゃん」の漫画を描かれていたかけだしちゃんさんにイロコトのPR漫画を描いて頂きました。

 

内容に関しては、弊社からは特に何の指示もせずに「描きたいように描いてください!」とだけお願いをさせて頂きました。

 

自分が若く描かれすぎているというツッコミ所はあるかもしれませんが、第三者の客観的な会社紹介となりますので、是非ご覧になってみてください。

 


イロコトではWebデザイナーの採用を行っておりますので、興味ある方は採用サイトの方をご覧ください!

 

]]>
https://irokoto.co.jp/blog/20220911/post-31/feed/ 0