デザインガイドライン/デザインシステムの記入項目

何かアプリケーションを開発する際に、デザインの方向性を決める際に作るビジュアルデザイン/デザインシステムは何を作るのか?

素人(自分)が作ったもの
– デザインの方向性
– トンマナ
– カラーパレット
– タイポグラフィ
– 参考サイト

プロが作ると、こういうアウトプットが出てくる。どちらかというともう少し粒度が細かなものを高品質に作ってくるイメージですね。
—-
Typography
– Name, Font, Weight, size, Line height, PLATEGRAM
– H1, H2, H3, T1, T2, T3, C1, C3, C4, C5
Button
– default, hover/pressed, disabled, loding

Inputs & Form
– Base/Multi, Input States(default, focus, error, disabled), Form Controls(password, texture, select)

Color Pallet
Core
Neutral 6種類
Status (error, warning, success)

Brand Layer
Common Primary 6種類
Spacing
Border Radius
Elevation

[Figma] UI kit

UI kitの画面から、コピー&ペーストで利用する

見たところ、AppleやMaterial Designの他、Figma公式やAnthropicなどでも出している

1. プロトタイプやMVP開発(スピード優先)
とりあえず動くものを作って検証したい段階では、配布されているUIキットをそのまま、あるいは色だけ変えてフル活用します。

2. 中〜大規模の開発(土台として活用)
ある程度しっかりした製品を作る場合、既存のUIキットを「ベース」にして、自分たちのブランド用にカスタマイズした**独自の「デザインシステム」を作る

3. OS標準に準拠する場合(ガイドラインとして)
iPhoneアプリやAndroidアプリを作る際、OS特有のルール(ナビゲーションバーの高さやアイコンのサイズなど)を守る必要がある

なるほど〜 UIKitは必須なんですね、知らんかった~

[Jupyter Notebook] 「入力テキスト→波形生成」

テキスト(周波数)を入力すると、その場で波形を描画する

%pip install matplotlib numpy ipywidgets
import numpy as np
import matplotlib.pyplot as plt
from ipywidgets import interact, FloatSlider

# 波形を描画する関数
def plot_wave(freq, amplitude):
    # データの生成
    t = np.linspace(0, 1, 1000)  # 0秒から1秒までを1000分割
    y = amplitude * np.sin(2 * np.pi * freq * t) # 正弦波の計算公式
    
    # グラフの設定
    plt.figure(figsize=(10, 4))
    plt.plot(t, y, color='blue')
    plt.title(f"Sine Wave: {freq} Hz")
    plt.xlabel("Time [s]")
    plt.ylabel("Amplitude")
    plt.grid(True)
    plt.ylim(-5, 5) # y軸の範囲を固定
    plt.show()

# インタラクティブなUIの作成
interact(plot_wave, 
         freq=FloatSlider(value=2.0, min=1.0, max=20.0, step=0.5, description='周波数(Hz):'),
         amplitude=FloatSlider(value=1.0, min=0.1, max=5.0, step=0.1, description='振幅:'))

[dify]mem0を使った開始ノード → LLM → 変数 → 出力の基本フロー

毎日やらないと本当に忘れる…

# Role
あなたはDMM英会話の専属復習コーチです。
ユーザーが今日のレッスンで学んだ3つの単語と、レッスン全体のメモ({{userinput.query}})を元に、記憶に定着するための復習プランを作成してください。

# Inputs
- Target Words: 
  1. {{#1759541502125.word1#}}
  2. {{#1759541502125.word2#}}
  3. {{#1759541502125.word3#}}
- Lesson Context: {{#1759541502125.memo#}}

# Output Strategy
以下の3つのセクションで構成してください。

## 1. 今日の重要表現(Quick Review)
各Target Wordについて、レッスン内容に即した意味と、もう一度使いこなすべき理由を簡潔に説明してください。

## 2. パーソナル瞬間英作文
各Target Wordを使って、ユーザーの日常生活や仕事、または次回のレッスンでそのまま使える「オリジナル例文」を1つずつ作成してください。
※一般的な例文ではなく、Lesson Contextの内容を反映させた実用的なものにしてください。

## 3. 次回のレッスンへの宿題(Next Action)
これらの表現を忘れないために、次回のDMM英会話のフリートークで先生に投げかけるための「質問文」や「フレーズ」を1つ提案してください。

whisperとgpt4oで音声認識+要約

import openai
import os
from dotenv import load_dotenv
load_dotenv()

# OpenAI APIキーの設定
# 環境変数から読み込むか、直接文字列を入力してください
client = openai.OpenAI(api_key=os.environ.get("OPENAI_API_KEY"))

def process_voice_to_summary(audio_file_path):
    try:
        print("1. 音声ファイルをテキスト化中(Whisper)...")
        # 1. Whisper APIで音声からテキストを抽出
        with open(audio_file_path, "rb") as audio_file:
            transcript = client.audio.transcriptions.create(
                model="whisper-1", 
                file=audio_file
            )
        
        raw_text = transcript.text
        print(f"抽出されたテキスト:\n{raw_text[:100]}...\n")

        print("2. テキストを要約中(GPT)...")
        # 2. GPT APIで要約を生成
        response = client.chat.completions.create(
            model="gpt-4o",  # または "gpt-3.5-turbo"
            messages=[
                {"role": "system", "content": "あなたは優秀な要約アシスタントです。提供された音声書き起こし文から、話し手が最も伝えたい核心的なメッセージを抽出し、簡潔な箇条書きで要約してください。"},
                {"role": "user", "content": f"以下のテキストを要約してください:\n\n{raw_text}"}
            ],
            temperature=0.7
        )

        summary = response.choices[0].message.content
        return raw_text, summary

    except Exception as e:
        return None, str(e)

# 実行部分
if __name__ == "__main__":
    file_path = "voice.mp3"  # ファイル名を指定
    
    # ファイルが存在するか確認
    if os.path.exists(file_path):
        original_text, summarized_text = process_voice_to_summary(file_path)
        
        if original_text:
            print("--- 要約結果 ---")
            print(summarized_text)
        else:
            print(f"エラーが発生しました: {summarized_text}")
    else:
        print("指定された音声ファイルが見つかりません。")

$ python3 app.py
1. 音声ファイルをテキスト化中(Whisper)…
抽出されたテキスト:
おい今月も汗水晒して働いて給料袋を受け取ったか その重みを感じているかそれは単なる紙切れではないお前の時間をお前の命を削って 変えた対価だ だが多くのサラリーマンはこのせっかくの対価をどう使えばいいか…

2. テキストを要約中(GPT)…
— 要約結果 —
– 給料は単なる紙ではなく、働いた時間と命の対価であり、賢く使うべき。
– お金を効果的に使う7つの方法を提案している。
– 自分の体と健康に投資し、知識を増やすために本や経験にお金を使う。
– 後輩や部下に食事を奢ることで信頼を積む。
– 時間を節約するためにお金を使い、時間を有効活用する。
– 身なりに気を使い、第一印象を良くする。
– 家族との時間に投資し、愛を示す。
– 失敗を恐れず挑戦し、経験を得ることにお金を使う。

リアルタイム処理じゃないとそこそこ時間がかかりますね。
要約自体は4oでやれば普通にいい精度が出ます。

[GCP] Document AIの超簡単なサンプル

## pdfの準備
skyworkで適当にpdfを作成する(geminiではpdf出力ができなかったので)
「OpenAIのエンジニアブログとはどんな内容が書かれていますか?サマリーをまとめてpdfで出力してください」

## GCP準備
– APIの有効化: 「Document AI API」を有効化する
– プロセッサの作成:
Document AI の管理画面へ行く。
「プロセッサを作成」をクリック。
「フォームパーサー (Form Parser)」 を選択して作成。
作成後に表示される 「プロセッサID」 をメモしておく。
– 認証: サービスアカウントキーを設定

$ pip3 install google-cloud-documentai

from google.cloud import documentai
from google.oauth2 import service_account

def quickstart_document_ai(project_id, location, processor_id, file_path):
    # 1. クライアントの初期化
    credentials = service_account.Credentials.from_service_account_file("***.json")
    client = documentai.DocumentProcessorServiceClient(credentials=credentials)

    # 2. プロセッサのリソース名を作成
    name = client.processor_path(project_id, location, processor_id)

    # 3. ファイルを読み込む
    with open(file_path, "rb") as image:
        image_content = image.read()

    # 4. リクエストの構成
    raw_document = documentai.RawDocument(content=image_content, mime_type="application/pdf")
    request = documentai.ProcessRequest(name=name, raw_document=raw_document)

    # 5. 処理の実行
    result = client.process_document(request=request)
    document = result.document

    # 6. 抽出されたテキストの表示
    print(f"Document processing complete.")
    print(f"Text content: {document.text[:100]}...") # 最初の100文字を表示

# 設定値
PROJECT_ID = "***"
LOCATION = "us" # または "eu"
PROCESSOR_ID = "***"
FILE_PATH = "test.pdf"

quickstart_document_ai(PROJECT_ID, LOCATION, PROCESSOR_ID, FILE_PATH)

$ python3 document.py
WARNING: All log messages before absl::InitializeLog() is called are written to STDERR
E0000 00:00:1769899191.780692 1445134 alts_credentials.cc:93] ALTS creds ignored. Not running on GCP and untrusted ALTS is not enabled.
Document processing complete.
Text content: OpenAI エンジニアブログの動向分析レポ
ート
作成日: 2026年1月31日
1. 要約
本レポートは、OpenAlの公式エンジニアブログ(Developer Blog)で公開された2025年の…

元のPDF

改行まで正確に読み取れていますね。

Blender 初心者〜キャラモデリング


## 1. 最初に覚えるべき「3大操作」

まずはツールをいじる前に、これだけは体に叩き込みましょう。

* **G (Grab):** 移動
* **S (Scale):** 拡大縮小
* **R (Rotate):** 回転
* **左クリック:** 決定 / **右クリック:** キャンセル

> **💡 ポイント:** モデリング中は「編集モード(Tabキー)」と「オブジェクトモード」を頻繁に行き来します。形を変えるのは**編集モード**です。

## 2. キャラクター制作のステップ

キャラクター制作は、大きく分けて以下のフローで進みます。

### ① 下絵(リファレンス)の配置

正面と横顔のイラストを背景に置きます。これがないと、立体にした時にバランスが崩壊します。

### ② ブロッキング(素体作り)

いきなり細部を作らず、立方体や円柱を並べて「だるま」を作るイメージで体型を決めます。

### ③ モデリング手法の選択

初心者が進みやすい道は2つあります。

* **ポリゴンモデリング:** 点・辺・面を動かして作る(カッチリした造形向き)。
* **スカルプト:** 粘土をこねるように作る(筋肉や有機的な造形向き)。
* *おすすめ:* 最初はポリゴンモデリングで、**「ミラー」モディファイア**(左右対称にする機能)を使いながら進めるのが効率的です。

### ④ モディファイアの活用

初心者の味方、**「サブディビジョンサーフェス」**を使いましょう。カクカクのモデルを滑らかにしてくれます。

## 3. 初心者がハマりやすい「3つの落とし穴」

1. **ポリゴンを増やしすぎる:**
最初から細かく分割すると、修正が地獄になります。まずは「これ以上この形は表現できない」という最小限のポリゴン数で進めましょう。
2. **トポロジー(面の流れ)を無視する:**
特に関節や顔は、動かした時に自然に曲がるような「面の流れ」が必要です。
3. **「マージ」忘れ:**
左右対称で作っているとき、真ん中の境目がパカッと割れてしまうことがあります。「マージ」にチェックを入れるのを忘れずに。

## 4. 学習に役立つキーワード

YouTubeなどで検索する際は、以下のワードを組み合わせると良質なチュートリアルが見つかります。

* **「Blender キャラクター 講座」**(日本語なら「ワニでもわかる」シリーズなどが有名です)
* **「Blender Low Poly Character」**(ローポリゴンは構造がわかりやすく、挫折しにくいです)

UXデザインの教科書 要約

安藤昌也氏の著書『UXデザインの教科書』は、UX(ユーザーエクスペリエンス)デザインを単なる「画面の使い勝手」ではなく、「ユーザーの体験を組織的に設計するための学問・技術」として体系立てて解説した、まさにバイブル的な一冊です。

## 1. UXデザインの定義と「期間」の概念

本書の最大の特徴は、UXを時間軸で捉える「UXの期間モデル」を提示している点です。

* **予期的UX:** 利用する前の期待感。
* **一時的UX:** 利用している瞬間の体験。
* **エピソード的UX:** 利用した直後の振り返りや満足度。
* **累積的UX:** 長期間利用し続けた結果、生活の一部になるような愛着。

> **ポイント:** 優れたUXデザインとは、一瞬の「使いやすさ」だけでなく、使う前のワクワクから使い終わった後の思い出までを設計することです。

## 2. 人間中心設計(HCD)のプロセス

UXデザインを実践するための標準的な枠組みとして、**HCD(人間中心設計)**のサイクルを回すことの重要性を説いています。

1. **利用状況の把握:** ユーザーがどんな場面で、何に困っているかを調査する。
2. **ユーザーニーズの特定:** 調査結果から、ユーザーが本当に求めている価値を抽出する。
3. **設計案の作成:** ニーズを満たすための構造やインターフェースを作る。
4. **設計案の評価:** プロトタイプをユーザーに試してもらい、検証・改善する。

## 3. 構造化シナリオ法

本書で具体的に推奨されている手法が**「構造化シナリオ法」**です。いきなり画面を作るのではなく、以下の3つのレベルで段階的に設計を進めます。

* **バリューシナリオ:** ユーザーがその製品を使ってどんな価値(本質的欲求)を得るか。
* **アクティビティシナリオ:** 価値を実現するために、ユーザーがどのような行動をとるか。
* **インタラクションシナリオ:** 具体的にシステムとどうやり取りするか(ボタンを押す、通知が来るなど)。

## 4. 本質的ニーズを見抜く

安藤氏は、ユーザーが口にする「〇〇が欲しい」という要望をそのまま鵜呑みにすることを戒めています。

* **「やりたいこと(Do)」**の裏にある**「ありたい姿(Be)」**を探ることが重要。
* フォトエッセイやインタビューなどの**調査手法**を駆使して、ユーザー自身も気づいていない潜在的なインサイトを掘り起こす技術が詳しく解説されています。

## まとめ:UXデザインの本質

この本が伝えているのは、**「UXデザインとは、ユーザーの喜びを可視化し、それをビジネスの形に落とし込むための共通言語である」**ということです。
デザイナーだけでなく、エンジニアやマネージャーもこのプロセスを理解することで、チーム全体で一貫した価値を提供できるようになります。

Tacotron2モデルをHugging Faceで実行し音声生成

$ pip3 install torchaudio speechbrain

import torchaudio
from speechbrain.inference.TTS import Tacotron2
from speechbrain.inference.vocoders import HIFIGAN

# 1. モデルの読み込み (Hugging Faceから自動ダウンロード)
# Tacotron2: テキスト -> メルスペクトログラム
tacotron2 = Tacotron2.from_hparams(source="speechbrain/tts-tacotron2-ljspeech", savedir="tmpdir_tts")
# HiFi-GAN: メルスペクトログラム -> 音声波形
hifi_gan = HIFIGAN.from_hparams(source="speechbrain/tts-hifigan-ljspeech", savedir="tmpdir_vocoder")

# 2. テキストからスペクトログラムを生成
text = "Hello, this is a test of Tacotron 2 on Hugging Face."
mel_output, mel_len, alignment = tacotron2.encode_text(text)

# 3. スペクトログラムから音声を生成
waveforms = hifi_gan.decode_batch(mel_output)

# 4. 音声ファイルとして保存
torchaudio.save('output.wav', waveforms.squeeze(1), 22050)

ほう