こんにちは、最近スマホのChatGPTアプリで、音声入出力機能を使って会話を楽しんでいる安部です。 皆さんWebアプリ開発などで、画面モックを作成しなければいけない場面は多いですよね? 適当なHTMLを作ったり、ツールで図示したりしますが、正直面倒です。 そこで今回は、ChatGPTに最初から画面モックを作ってもらいます。 最近はChatGPTに画像を添付できるようになったので手書き画像からHTMLを出力することもできますが、 この記事では画面要素を言葉で指定し、HTMLを出力してもらいます(配置などのデザインは、ひとまずChatGPTにお任せしてみます)。 では早速始めましょう。使用モデルはGPT-4です。 簡単な入力フォームを出力させる まずは、よく使いそうな簡単な入力フォームを出力してもらいます。 ここでは、「書籍を登録する画面」という設定で指示を出します。 次の画面構成の案を、HT

みなさんこんにちは、クラスメソッドWeb担当の野中です。 昨日行われたAdobe MAXの発表でFireworksの新機能開発が終了 *1だそうですね。びっくりです。 さて、前回の身につけておきたいWebサイト高速化テクニック #3|画像形式の基礎知識では、画像の品質を保ちながらファイルサイズを抑えるためにそれぞれの画像形式の特性について紹介しました。 第3回でリクエスト数の削減について先に解説すると記載していますが、文章の構成を考えると画像の書き出しについて先に説明した方が流れとしてわかりやすいので順番を変更しています。本題 今回はPhotoshopやIllustrator、Fireworksを使った最適な画像書き出しの基本的な手法について紹介したいと思います。 前回の記事で得た知識を前提に解説しますので、まだ前回の記事を読んでいない方は必ず読んでおいてください。 この記事の対象者 W

2009年からランディングページを集めているサイトです。購買行動や認知拡大のために作られたランディングページのデザインまとめサイトです。LP制作の参考にどうぞ。 プライバシーポリシー
delivery option detail delivery city jakarta delivery date 24/03/2025 delivery time Afternoon | 13:00 - 18:00 delivery option detail RECIPIENT NAME jane doe delivery address Jl. Gatot Subroto No. 25, RT.2/RW.4, Kuningan Barat, Kecamatan Mampang Prapatan, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12710, Indonesia recipient phone number (+62) 812-3456-7890 PROVINCE Jakarta postal code 1271

ティーンは、自分のウェブを扱う能力に(過剰に)自信を持っているが、彼らのパフォーマンスは大人に劣る。読解レベルの低さや、忍耐力のなさ、発展途上の情報収集スキルにより、ティーンのタスク成功率は低くなる。そのため、サイトはシンプルで共感しやすいものにする必要がある。 TeenageUsability: Designing Teen-Targeted Websites by Nielsen Norman Group on February 4, 2013 日本語版2013年2月18日公開 ティーンはインターネットにつながっている。テクノロジーがティーンエイジャーの生活に深く溶け込んでいるため、彼らに役立つ、ユーザブルなウェブサイトを作り出すことがこれまで以上に重要になってきている。次善のものがクリックするだけで手に入り、SMSメッセージによる割り込みが例外ではなく普通のことである世界で成功する

Webサイト制作を受注するときに必要になるのが、企画提案書です。企画提案書はクライアントの要望を正確に引き出すことを目的に、ヒアリングした内容をもとにプロジェクトの概要をまとめます。具体的には、Webサイトの目的、コンテンツ内容、サイトマップ、画面レイアウト(ワイヤーフレーム、デザインカンプともいいます)、スケジュール、サーバー環境、見積金額などを記載します。クライアントから発注を受ける前に、Webサイトの完成イメージをクライアントに理解してもらうためにも重要なものです。 企画提案書でクライアントの要望が確定したら、次の要件定義書の作成に入っていきます。 企画提案書の作成方法 企画提案書の作成には、マイクロソフトのPowerPointを使用することが多いようです。実際に自分がクライアントの前でプレゼンする状況をイメージしながら、話をする順番に沿ってページを作成していきます。 企画提案書の前

ヒアリングシートとは、クライアント企業の希望に沿ったWebサイトを制作するために、要望を正確に聞き出す目的で作成する質問リストのことです。ヒアリング時の質問内容を事前に用意しておくことで聞き洩らしを防ぐとともに、プロジェクトに対する意気込みをクライアントに伝えられます。 ヒアリングシートは、ミーティング時に全員に配布するアジェンダとは異なり、基本的には制作サイドでクライアントに確認しながらその場で記入します。作成後は、聞き出した要望を制作スタッフと共有するための内部資料として使用します。 ヒアリングシートの具体的な使い方 ヒアリング当日は、クライアントが理解しやすい言葉を使って、事前に用意しておいた質問を1つずつ聞いていきます。制作会社では当たり前に使っている用語が、クライアントの担当者にとっては難しい言葉であることはよくあります。また、会話の中で互いに使っている用語が違う意味を指している

何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。 それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。iPhoneの特徴 まずは、iPhoneの特徴を見てみましょう。 一つの端末で複数の解像度を持つiPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。 例えば、縦持ちのときは320pxで、横持ちのときは480pxとなります。 ※縦持ちのとき ※横持ちのとき そのため、320pxに最適化したコーディングをすると、横持ちのときに160px分の余白が空いてしまうため、320pxにも480pxにも対応出来るコーディングをする必要があります。 ※そのためには、デザインをしっかりと考えたものにしなければいけませんが…。HTMLやCSSの実装状況はパソコンと同様iPhone

1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く