AIと協働でアナログ時計をつくる！①ーGoogleサイトで作るグループウェア(179)ー
🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！
この記事を読んで欲しい方
企業DXや学校DXの進め方に悩んでいる方
クラウドアプリの導入に悩んでいる方
自分だけのGoogleサイトを作ってみたい方
①AIと協働でアナログ時計を作ってみよう！
みなさんこんにちは。
Claude使っていますか？
今回は、Claudeで作ったアナログ時計ジェネレータLite（無料版）とAI（Claude）を使って、Web上で表示できるアナログ時計をデザインしてみたいと思います。
アナログ時計をいちからデザインするのが難しい方には、おすすめの方法です。
以下の２つのサイトを開いておいてください。
②参考にしたい時計の写真を手に入れる
まず、ネットから参考にしたい時計の写真をダウンロードして、手に入れてください。たとえば、このような画像です。
次に、AIにデザインさせるための設定JSONファイルを用意します。
Lite用の初期の設定JSONファイルは以下のようになっています。（アナログ時計ジェネレータLiteのコード生成タブ＞設定保存で初期設定JSONファイルを作ることもできます）
この２つのファイルをAI(Claude）に添付します。
更に、以下のプロンプトを入力して実行します。
# 添付したJSONは、アナログ時計ジェネレータLiteの設定ファイルです。添付画像の時計を参考に、JSONを使ってデザインしてください。
# なお、利用できるフォント、針の形状、材質は以下のとおりです。
# フォント、針の形状、材質が見つからない場合は、なるべく似たものを選択してください。
## 1. フォント: - サンセリフ: - Arial - Helvetica - Verdana - Montserrat - Oswald - Fjalla One - BIZ UDGothic - BIZ UDPGothic - Poppins - Quicksand - Comfortaa - Josefin Sans - Titillium Web - セリフ: - Times New Roman - Georgia - Palatino - 装飾: - Arial Black - Impact - Orbitron - Parisienne
## 2. 針の形状: - 直線（バー先丸） - 長方形（バー） - 台形(バー） - 三角形（ドルフィン）
## 3. 材質: - 通常 - 光沢 (標準) - メタリックプロンプト実行後に、Artifactsの画面から、生成された設定JSONファイルをダウンロードします。（なまえはSEIKO1.jsonにしましょう）
③AIデザインの時計の読込みと表示
コード生成タブをクリックして、設定読込ボタンを押します。
開いた画面から、先程のSEIKO1.jsonを選択し開くボタンを押します。
画面の下部に、設定がインポートされましたと一瞬表示されます。
最後に、設定とプレビュータブをクリックして確認します。
すると、AIが添付画像を参考にデザインしたものが表示されました。
④人間の出番
ここからは、人間の出番です。参考画像を見ながら、修正していきます。
色の部分は、スポイトツールで実際の画像から取り込むと、よりリアルなものが作れます。
文字盤＞外枠＞数字＞目盛＞ロゴの順番に、色、大きさ、フォント、位置を修正していきます。
はじめに、文字盤の色は、スポイトツールをつかって参考写真から指定します。
次に、外枠にもスポイトツールをつかって参考写真からグレー色を付け、さらに幅を広げます。
つぎに、参考画像を見ながら、数字と目盛りの大きさと位置を修正します。
さらに、針（時針、分針、秒針、中央の丸）を修正します。
ロゴのフォントと大きさ、位置を修正します。ほぼ完成しました。
最後に、外枠の材質を光沢にします。発色をみながら修正してください。
Webに貼り付ける画面に合わせて、全体サイズを設定します。今回は200pxに変更しました。
コード生成タブ＞コード生成ボタンを押して、Web埋め込み用のHTMLを生成させます。
コードコピーボタンを押すと、クリップボードにHTMLがコピーされます。
また、設定保存ボタンを押すと、今回作成した時計の設定JSONファイルが、エクスポート保存されます。これを読み込むことで、何度でも表示、修正が可能です。
また、設定JSONファイルを他の人に送ることで、時計のデザインを渡すこともできます。
最後に、Googleサイトに生成したコードを貼り付けて完成です。
⑤おわりに
いかがでしたでしょうか？
ネットから手に入れた写真とAI（Claude)を使うことで、かなり簡単に、アナログ時計を作ることができました。
Claudeも無料版なら、１日６回までは作成可能ですので、無料のLite版と合わせて、ぜひデザインをしてみてください。
このように、人間とAIとの協働でデザインしていける可能性を実感できたとおもいます。
現状では、AIに写真と見紛うほどのデザインはできませんが、ゼロからデザインするのではなく、多くのアナログ時計の写真を参考にしながら作っていけるので、初心者の方でもアナログ時計を簡単に作ることができます。
次回は、生成したHTMLの圧縮と、Notionへの時計の埋め込みに焦点をあてていきます。
