Webサイトをデザインする際、ページレイアウトや機能設計など、最初に作るWebサイトの骨組みのことを「ワイヤーフレーム」と呼ぶらしい。
CG上がりの自分は、ワイヤーフレームと言うと内挿補間していないポリゴンを連想してしまうのだが、この「Webサイトのワイヤーフレーム」は要するに「画面設計」みたいなものだろうか。
画面設計と呼ぶと途端にエクセル方眼紙みたいなイメージがわくけど、こっちはSEやプログラマー用語なんだろうか。
このワイヤーフレームを作るためのオンラインツールというものがいくつか存在するらしい。
iPlotz
Gliffy
mockingbird
参考：オンラインで使えるワイヤーフレーム作成ツール
ちょっと触ってみたけど、単純にレイアウトや色味などをデザインしたいなら、PhotoshopやIllustratorの方が良さそう。たぶんWebサイト設計で問題となるのは「機能」なんだろうな、と改めて思う。
デザインとは言っても、Webサイトの場合は完全にゼロから自由に始めることはほとんどなくて、使うインフラやライブラリはすでに検討をつけてあり、必然的に制約が担保される。
Webサイトのデザイン作業において、機能をアイコン表記するだけで成り立つのは、「全く新しい機能」なんてものはほとんど導入しないから。
また、業務システムの設計がエクセル方眼紙でそこそこ成り立つのも同じで「UIはいつものパターン」という共通認識が出来上がっているから。業務システムでまず注力するのはビジネスロジックであって、UIやUXではない。
UIデザインと機能デザインを同時平行して「全く新しいもの」なんてなかなか作れるもんじゃない。
と、昔の業務システム開発の経験を振り返ったのであった。(何が言いたかったんだ？)
関連記事
C++始めようと思うんだ
IronPythonを使ってUnity上でPythonのコー...
Iridescence：プロトタイピング向け軽量3D可視化ラ...
WordPressのサーバ引っ越し方法を考える
OpenCVでiPhone6sのカメラをキャリブレーションす...
映画から想像するVR・AR時代のGUIデザイン
3分の動画でプログラミングを学習できるサイト『ドットインスト...
RSSフィードを読込んで表示するWordpressプラグイン...
ポリゴンジオメトリ処理ライブラリ『pmp-library (...
TensorFlowでCGを微分できる『TensorFlow...
BlenderのPython環境にPyTorchをインストー...
生物の骨格
Faster R-CNN：ディープラーニングによる一般物体検...
Google App Engineのデプロイ失敗
FreeMoCap Project：オープンソースのマーカー...
任意の英語サイト中で自分がまだ覚えていない英単語だけに日本語...
Pylearn2：ディープラーニングに対応したPythonの...
PyTorch3D：3Dコンピュータービジョンライブラリ
Unityで強化学習できる『Unity ML-Agents』
ヒトデの骨格のような構造物を作成するシステム『KINEMAT...
Google App Engine上のWordPressでA...
DensePose：画像中の人物表面のUV座標を推定する
html5のcanvasの可能性
MVStudio：オープンソースのPhotogrammetr...
法線マップを用意してCanvas上でShadingするサンプ...
Deep Fluids：流体シミュレーションをディープラーニ...
Human Generator：Blenderの人体生成アド...
触れば分かる ユニバーサルデザインな腕時計『The Brad...
Managing Software Requirements...
WordPressのテーマを自作する
Amazon EC2ログイン用の秘密鍵を無くした場合の対処方...
Kubric：機械学習用アノテーション付き動画生成パイプライ...
ブログをGoogle App EngineからAmazon ...
ブログが1日ダウンしてました
BlenderProc：Blenderで機械学習用の画像デー...
ブログの復旧が難航してた話
ブラウザ操作自動化ツール『Selenium』を試す
Google Chromecast
3Dモデルを立体視で確認できるVRアプリを作っている
Manim：Pythonで使える数学アニメーションライブラリ
cvui：OpenCVのための軽量GUIライブラリ
PythonでMayaのShapeノードプラグインを作る
コメント