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

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

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


スポンサーリンク

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


スポンサーリンク

関連記事

書籍『仕事ではじめる機械学習』を読みました
ドットインストールのWordPress入門レッスン
Mask R-CNN:ディープラーニングによる一般物体検出・Instance Segmentatio...
アクセス元IPアドレスから企業名が分かるアクセス解析『User Local スマートフォン解析』
OpenGVのライブラリ構成
科学技術計算向けスクリプト言語『Julia』
COLMAP:オープンソースのSfM・MVSツール
Mitsuba 2:オープンソースの物理ベースレンダラ
Rerun:マルチモーダルデータの可視化アプリとSDK
プログラミングスキルとは何か?
2D→3D復元技術で使われる用語まとめ
OpenVDB:3Dボリュームデータ処理ライブラリ
ブログがダウンしてました
FreeMoCap Project:オープンソースのマーカーレスモーションキャプチャ
OpenSfM:PythonのStructure from Motionライブラリ
Geogram:C++の3D幾何アルゴリズムライブラリ
Unity ARKitプラグインサンプルのドキュメントを読む
OpenCV 3.1とopencv_contribモジュールをVisual Studio 2015で...
Verilog HDL
DCGAN (Deep Convolutional GAN):畳み込みニューラルネットワークによる敵...
OpenCVの超解像(SuperResolution)モジュールを試す
WinSCP
ZBrushのZScript入門
デザインのリファイン再び
Google Colaboratoryで遊ぶ準備
viser:Pythonで使える3D可視化ライブラリ
AMIMOTO HHVMのパッケージを3.9へ更新
AMIMOTO(PVM版)で作成したインスタンスをAMIMOTO (HVM版)へ移行する
ブログの復旧が難航してた話
『メカニックデザイナー 大河原邦男展』に行ってきた
IronPythonを使ってUnity上でPythonのコードを実行する
Dlib:C++の機械学習ライブラリ
Unity MonoBehaviourクラスのオーバーライド関数が呼び出される順番
Polyscope:3Dデータ操作用GUIライブラリ
続・ディープラーニングの資料
Web経由でRaspberry PiのGPIOを操作したい
オープンソースの物理ベースレンダラ『Mitsuba』をMayaで使う
Python拡張モジュールのWindows用インストーラー配布サイト
ブログのデザイン変えました
SONY製のニューラルネットワークライブラリ『NNabla』
UnityでTweenアニメーションを実装できる3種類の無料Asset
ZBrushで人型クリーチャー

コメント