チュートリアル！通義オフィスを使ってオンライン公開可能な個人ポートフォリオを作る方法

コードを書いたり、デザインをしたりしなくても、個人作品のウェブサイトをそのままオンラインに公開できます。

QwenWork 使用ガイド

プログラミングもデザインもわからないけど、動画やアニメーション効果が含まれていて、すぐに公開できるポートフォリオサイトを作ることは可能でしょうか？

もちろん可能です。

今回はあるクリエイターと一緒に、QwenOfficeを使って一から実際に操作してみます。

完成したウェブサイトは、だいたいこのような感じです👇

サイトの事例およびデモ素材の出典：@桂有桂の道理

作品表示エリアがあり、動画再生に対応し、インタラクティブなアニメーション効果も備わっており、ブラウザで直接開いて閲覧でき、何よりビジュアルの美しさも保たれています。

あなたもこんなかっこいい個人用ポートフォリオを持ちたいと思いませんか？

この記事では、すべて一気にご紹介します。

Qwenと一緒に続きを読みましょう⬇️

まずは参考資料を収集し、スタイルの方向性を明確にする

ウェブサイトを作る最初のステップは、すぐにはじめるのではなく、まず次のように観察することです。

他人は通常どのように処理しているのか。

特にポートフォリオのような審美性が重視されるプロジェクトでは、最初に自分が望むスタイルを明確にしておく必要があります。そうでないとAIに作業を依頼した際に、混乱する可能性が高くなります。

ネット上で素材や参考情報を必死に探して頭を悩ませる必要はありません。まずQwenOfficeにインターネットを検索してもらいましょう。

例えば、そのまま伝えます。

個人用ポートフォリオサイトを作りたいので、xx業界のデザイナーたちのポートフォリオサイトをいくつか探して、特にトップページのビジュアルデザイン、作品の提示方法、フォントの組み方、インタラクション効果などをチェックし、参考になるポイントをまとめてください。

QwenOfficeはブラウザ機能を利用して、自動的に関連ページを検索・開いて閲覧し、さまざまな事例の中から参考になるデザインの特徴を整理してくれます。

自分自身で十数個のページを開きながら行き来する必要もなく、気に入ったページをブックマークしてもその後見返さないということもありません。

まずQwenOfficeに価値あるコンテンツを選んでもらい、「メニュー」の中から自分の好みに合うものを選ぶだけで済みます。

プロンプトが書けない？AIに原案を作ってもらおう

参考資料が見つかったら、次の問題がすぐに発生します。

このサイトは確かに好きだけど、AIにどうやって伝えればいいの？

フォントはどんなスタイル？なぜこのページは見やすいと感じる？スクロール時のエフェクトの名前は何？メインビジュアルはどうやって作られている？……

理解することは別として、それらをプロンプトに変換するのはまた別の話です。

だから、書けないなら無理に考え込む必要はありません。好きなページやスクリーンショット、その他のビジュアル参考資料をそのままQwenOfficeに渡して、まず分解してもらいましょう。

メインビジュアル、フォント、レイアウト、ページ構造、インタラクション効果まで、デザインの特徴を分析し、より具体的なウェブサイト制作の指示にまとめてくれます。

つまり、「こういう感じが欲しい」という曖昧な表現を

「このページは具体的にこうすべき」という正確な指示に翻訳するようなものです。

このプロンプトができたら、自分のニーズに合わせて加減するのはずっと簡単になります。どこを残したいか、どこを変えたいか、どの効果をさらに強調したいかなど、追加で指示できます。

ゼロからプロンプトを考える必要はありません。まずQwenOfficeに骨格を作ってもらい、その後自分の方向性に調整すればよいのです。

第一版に満足できない？画面を見ながら直接修正しよう

プロンプトの準備ができたら、サイトを作成できます。

ただし先に言っておきますが、第一版が完璧ではないのはまったく普通のことです。

AIでサイトを作るというのは、一言入力して画面がチカっと光ったら完璧なサイトが天から降ってくるわけではありません。

もっと現実的な方法は、大枠を完成させてから、既存のページを基に細部を少しずつ調整していくことです。

例えば今回のサイトにはイチョウの花のビジュアルデザインがあります。

第一版が完成したとき、花の形が抽象的すぎて、他のページの植物要素とあまり調和していませんでした。

この場合、自分でどう修正すべきか苦心する必要もなければ、やり直す必要もありません。QwenOfficeが整理した指示をベースに、自分の要求を再調整すればよいのです。

現在のサイトを基に継続して変更してくれるので、部分的な修正によって全体の方向性がずれる心配もありません。

フォントをもう少し大きくしたい、余白が不十分、画像の比率を調整したい、特定のアニメーション効果の表現を変えたい… といった要望も、そのまま伝えることができます。

まず第一版を作り、その後繰り返し細部を磨いていく方が、「一言で完璧なサイトを生成する」ことにこだわるよりもずっと現実的です。

作品が動画？そのままアップロードして動的コンテンツに変換

ポートフォリオに広告映像、短編映画、モーショングラフィックス、製品デモなどが含まれている場合、静止画だけを掲載するのは勿体なく感じます。

そんなときは、パソコン内の動画素材をそのままQwenOfficeにアップロードしてください。

ローカルファイルを読み込み、ウェブ表示に適した動的コンテンツに処理して、対応する作品モジュールに直接挿入してくれます。

別ツールでフォーマット変換やエクスポートをして、また戻ってページを編集する手間が省けます。出来上がりのビジュアルはより豊かで美しく、アニメーション制作の煩雑さも解消されます。

動的コンテンツを展示したい人にとっては、本当に楽チンです。

修正意見がDingTalk（ディントーク）にある？それもそのまま処理可能

サイトの第一版ができた後、通常は次々とフィードバックが届きます。

問題は、これらのフィードバックがきれいに表にまとめられていないことです。

多くの場合、DingTalkの会話の中に散在しています。

「2番目の作品の画像を差し替えて」

「ここはフォントをもう少し大きく」

「経歴に一段落追加して」

「......」

一つ一つ自分で整理すると、漏れが生じやすいです。

しかし、QwenOfficeはDingTalkと連携しているため、この部分も直接処理できます。

例えば、会話記録の中の修正意見をまとめて整理してもらうことができます。

会話の中に散らばっていた数行のメッセージが、明確な修正リストに整理され、QwenOfficeがチェックして、どの項目が完了済みで、どの項目が未処理かを確認できます。

フィードバックの収集、要件の整理、修正後の再確認まで、会話履歴をいちいち見返して確認する手間が不要です。

最後のステップ：そのままオンライン公開

ページ、素材、フィードバックのすべてが整ったら、公開の準備に入ります。

複雑なドメイン設定を自分で行う必要があると思っていましたか？まったく不要です！

QwenOfficeはドメインとデータベースサービスを提供しており、一声かけるだけで、ローカルのページを即座にオンラインに公開してくれます。

これで、パソコンのフォルダ内に眠っていたポートフォリオが、ようやくクライアントや採用担当者、友人に送って開いてもらえる完成品へと変わりました。

この一連のプロセスにおいて、コードの書き方を学ぶ必要もなければ、デザインの調整、アニメーションの制作、フィードバックの整理、公開の手順を別々の工程に分ける必要もありません。

参考資料の収集、プロンプトの作成、ページの生成、自分の素材の挿入、修正・最適化、そして最終的な公開まで、すべてQwenOffice内でワンストップで完結します。

もし今、まだ整理できていない作品群をお持ちなら、ぜひQwenOfficeを使って、実際にウェブサイトにしてみてください。

We dedicated to serving clients with professional DingTalk solutions. If you'd like to learn more about DingTalk platform applications, feel free to contact our online customer service or email at このメールアドレスはスパムボットから保護されています。閲覧するにはJavaScriptを有効にする必要があります。. With a skilled development and operations team and extensive market experience, we’re ready to deliver expert DingTalk services and solutions tailored to your needs!