2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

セルフホスト型 AIプラットフォーム 「Open WebUI」 全画面スクショ撮ってみた! ~難しいことはわからないデザイナーがざっくり解説~

Last updated at Posted at 2025-03-25

はじめに

こんにちは! 株式会社WebCrewのデザイナー@wc-nakagomiです。

今回は、 「Open WebUI」に興味がある方 に向けて、 UIおよび機能について 全画面のスクリーンショットを交えながらざっくり解説します。(わかる範囲で補足説明をいれております🙇‍♂️  詳しく知りたい方は公式ドキュメント をチェックしてみてください!)
※スクリーンショット画像は、クリックまたはタップで拡大表示が可能です(Qiitaの仕様上、別タブで表示されます)。細かい部分が見づらい場合は、ぜひご活用ください。


また、 「Open WebUI」の概要や特徴について は下記記事にまとめましたので併せてご覧いただけると幸いです。

本記事が何かの参考になれば幸いです! それではスタート!

全体構成

「Open WebUI」は、 左側にサイドバー、右側にチャットエリア を配置した、 LLM(大規模言語モデル)のUIとして一般的な構成 となっています。標準的な機能が既に搭載され、 UIも整備されているため、デザイナーやフロントエンド担当者が不在の場合でも問題なく利用できるレベル に仕上がっています。

02.jpg
LLMのUIとしてよく見られる構成のホーム画面です


03.jpg
各画面と機能や設定の構成

サインアップ・サインイン画面

シンプルな設計で、必要最低限の入力項目のみで構成されています。

04.jpg
サインアップ画面


05.jpg
サインイン画面

ホーム画面

ChatGptライクなUIで直感的に操作できるUIになっています。

06.jpg

サイドバー

標準的な機能が搭載され、以下の操作が可能です。
・サイドバーの開閉
・チャット履歴の表示
・チャットのピン留めや共有、削除など

07.jpg
サイドバー


08.jpg
チャット項目メニュー


09.jpg
サイドバーを閉じたホーム画面

チャットエリア

リアルタイムに自然な会話形式でのやり取りができるほか、以下の機能も備えています。
・モデル選択
・デフォルトプロンプト
・各種ファイルのアップロード
・音声入力 など

10.jpg
11.jpg
チャット画面


12.jpg
モデル選択:連携したモデルを選択できます(複数選択も可能)


13.jpg
14.jpg
デフォルトプロンプト:あらかじめ登録しておいたプロンプトを呼び出せます


15.jpg
ファイルのアップロード


16.jpg
音声入力

その他機能

ワークスペース

AIアシスタントのカスタマイズ、RAG用のナレッジ登録、各種ツールの追加などが可能です。ワークスペースのモデルでは GPTsやGem で出来るような特化型のモデルを構築できます。また、Open WebUIコミュニティからモデルやツールなどをダウンロードすることも可能です。

17.jpg
モデル:特化型モデルの構築ができます


18.jpg
ナレッジ:RAG用のPDFファイルなどをアップロードできます


19.jpg
プロンプト:繁に使用するプロンプトの登録ができます(メッセージ入力時に「/」を入力すると一覧表示)


20.jpg
ツール:Web検索などのツール登録ができます(メッセージ入力エリアの「+」からアクセス)

チャットコントロール

チャットに関する詳細な設定が可能です。

21.jpg

チャット記録

チャットのアーカイブ機能により、過去のやりとりを記録することができます。

22.jpg

プレイグラウンド

ベータ版。ライブチャット環境展開前に、サンドボックス環境でモデル機能やパラメータのテスト・検証が可能な機能です。公式ドキュメントより

23.jpg
チャット


24.jpg
Completions

ユーザー設定

多岐にわたる設定が可能です。中には翻訳されていない項目や用途が不明なものも見受けられます。(わかる範囲で補足説明をいれております🙇‍♂️)

一般

25.jpg
ダークモードや言語設定、システムプロンプトの追加・変更が可能です

インターフェース

26.jpg
ページの表示の仕方などの変更が可能です

接続

27.jpg

個人化

28.jpg

オーディオ

29.jpg

チャット

30.jpg

アカウント

31.jpg
プロフィール画像やパスワードを変更できます

概要

32.jpg

管理者設定

こちらも多岐にわたる設定が可能です。翻訳されていない項目や用途が不明なものも見受けられます。(わかる範囲で補足説明をいれております🙇‍♂️)

ユーザー

33.jpg
Overview:ユーザー管理ページ。管理者、一般ユーザー、保留中の役割設定が可能です

34.jpg
Groups:グループ分けが可能で、各項目のアクセス制限などの設定を行えます

Evaluations

35.jpg
Leaderboard

36.jpg
Feedbacks:AIの回答に対する評価が一覧表示されます

Functions

37.jpg

設定

38.jpg
一般

39.jpg
接続

40.jpg
モデル:連携したモデル一覧が表示されます

41.jpg
Evaluations

42.jpg
ドキュメント

43.jpg
ウェブ検索

44.jpg
Code Execution

45.jpg
インターフェイス:バナーではホーム画面に表示するデフォルトプロンプトの設定が可能です

46.jpg
オーディオ

47.jpg
画像

48.jpg
パイプライン

49.jpg
データベース

いかがでしたでしょうか?
実際に記事としてまとめると項目数が非常に多くなってしまいました💦 (それだけ「Open WebUI」が多機能ということですが)
このプラットフォーム活用することで、人的リソースや工数を削減しながらセキュアなLLMを構築することが可能となります。


なお、冒頭でもご案内させていただきましたが「Open WebUI」の概要や特徴、社内LLM用の構成についてを下記記事にまとめていますのでご興味ある方はぜひご覧ください。

「Open WebUI」をまずは試してみたい方へ

「どんなものか、ちょっと試してみたい!」という方は、以下の参考記事をチェックして、ご自身のPCにインストールしてみてください。難しいことはわからない私でもスムーズに導入できましたのでおすすめです!

アップデートも頻繁にされますが下記記事の魔法の言葉(スクリプト)を下記画像の場所に入れて少し待つと自動でアップデートしてくれます!

※インストールやアップデートは、ご自身の判断と責任で行うようお願いいたします。

05.jpg

06.jpg

以上となります! お読みいただきありがとうございました。

「Open WebUI」についての参考記事とサイト

「Open WebUI」の概要や、弊社の社内LLM作成時に参考にした記事・サイトです。以下のリンクよりご確認ください。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?