Webサイトのワイヤーフレームが作成できるオンラインツール

Webサイトをデザインする際、ページレイアウトや機能設計など、最初に作るWebサイトの骨組みのことを「ワイヤーフレーム」と呼ぶらしい。
CG上がりの自分は、ワイヤーフレームと言うと内挿補間していないポリゴンを連想してしまうのだが、この「Webサイトのワイヤーフレーム」は要するに「画面設計」みたいなものだろうか。
画面設計と呼ぶと途端にエクセル方眼紙みたいなイメージがわくけど、こっちはSEやプログラマー用語なんだろうか。

このワイヤーフレームを作るためのオンラインツールというものがいくつか存在するらしい。
iPlotz
Gliffy
mockingbird
参考:オンラインで使えるワイヤーフレーム作成ツール


スポンサーリンク

ちょっと触ってみたけど、単純にレイアウトや色味などをデザインしたいなら、PhotoshopやIllustratorの方が良さそう。たぶんWebサイト設計で問題となるのは「機能」なんだろうな、と改めて思う。
デザインとは言っても、Webサイトの場合は完全にゼロから自由に始めることはほとんどなくて、使うインフラやライブラリはすでに検討をつけてあり、必然的に制約が担保される。
Webサイトのデザイン作業において、機能をアイコン表記するだけで成り立つのは、「全く新しい機能」なんてものはほとんど導入しないから。
また、業務システムの設計がエクセル方眼紙でそこそこ成り立つのも同じで「UIはいつものパターン」という共通認識が出来上がっているから。業務システムでまず注力するのはビジネスロジックであって、UIやUXではない。
UIデザインと機能デザインを同時平行して「全く新しいもの」なんてなかなか作れるもんじゃない。
と、昔の業務システム開発の経験を振り返ったのであった。(何が言いたかったんだ?)


スポンサーリンク

関連記事

OpenCVの顔検出過程を可視化した動画
日本でMakersは普及するだろうか?
組み込み向けのWindows OS 『Windows Embedded』
WinSCP
OpenCVの超解像処理モジュール『Super Resolution』
オープンソースの顔認識フレームワーク『OpenBR』
書籍『仕事ではじめる機械学習』を読みました
Google App Engineのデプロイ失敗
Webスクレイピングの勉強会に行ってきた
PythonのStructure from Motionライブラリ『OpenSfM』
ブラウザ上でJavaScript,HTML,CSSを書いて共有するサイト『jsdo.it』
今年もSSII
プロダクトデザイン概論
SONYの自律型エンタテインメントロボット『aibo』
UnityでLight Shaftを表現する
スクラッチで既存のキャラクターを立体化したい
動的なメモリの扱い
Webページ制作のためのメモ
マルコフ連鎖モンテカルロ法
Russian3DScannerのトポロジー転送ツール『WrapX』
Twitter APIのPythonラッパー『python-twitter』
『Deep Fluids』流体シミュレーションをディープラーニングで近似する
GANs (Generative Adversarial Networks):敵対的生成ネットワーク
複数画像から3次元形状を再構築するライブラリ『Multi-View Environment』
フォトンの放射から格納までを可視化した動画
Google XML Sitemap Generatorプラグインを3.4.1へダウングレード
OpenCVのバージョン3が正式リリースされたぞ
まだ続くブログの不調
フィクションに登場するUIデザインのまとめサイト
C#で使えるNumPyライクな数値計算ライブラリ『NumSharp』
アクセス元IPアドレスから企業名が分かるアクセス解析『User Local スマートフォン解析』
.NETで使えるTensorFlowライクなニューラルネットワークライブラリ『NeuralNetwo...
OpenGVの用語
『Geocities-izer』 どんなWebページも一昔前のダサいデザインに変えてくれるサービス
Deep Learningとその他の機械学習手法の性能比較
Windows10でPyTorchをインストールしてVSCodeで使う
Unreal Engineの薄い本
2D→3D復元技術で使われる用語まとめ
Raspberry Pi 2を買いました
OpenCV バージョン4がリリースされた!
プログラミングスキルについて考える
OpenCV

コメント