01
ブラウザですぐ使える
インストール不要。PCのブラウザを開いて、その場から制作を始められます。
02
画像とベクターを編集
写真、図形、テキスト、パスを同じキャンバス上で扱い、細部まで調整できます。
03
複数ページ・プロトタイプ
ページ、ステート、画面遷移をひとつのデータで整理し、操作の流れまで確認できます。
04
Figma・Illustratorと連携
SVGを読み込んで編集し、書き出したデータを他の対応ソフトへつなげられます。
MADE IN JAPAN
HOKUSAIは、日本で開発された
HOKUSAIは、日本で開発された
純国産のブラウザデザインツールです。
HOKUSAIは、かつてFireworksを愛用していた日本のWeb制作者の
「あの使いやすさを、もう一度」という思いから生まれました。
日本国内で企画・設計から開発まで一貫して行い、
制作現場になじむ操作感と使いやすさを大切にした、純国産のブラウザデザインツールです。
One tool, many workflows
考える、つくる、伝える。
考える、つくる、伝える。
制作の流れをひとつにつなぐ。
Figmaの画面設計、Illustratorのベクター編集、
Fireworksの画像とベクターを行き来する制作感、ブラウザツールの手軽さ。
それぞれの良さを取り入れながら、制作から受け渡しまでをひとつにつなぐ環境を目指しています。
01
Webデザインから
WEB DESIGN & PROTOTYPE
Webデザインから
画面設計、
プロトタイプまで。
複数ページやステートを使って、Webサイトやアプリの画面をまとめて設計できます。ページ間のリンクや画面遷移も設定でき、完成前の操作イメージまで確認できます。
- Webサイト・アプリの画面を複数ページで管理
- 状態違いのUIをステートとして整理
- リンクとプレビューで操作の流れを確認
02
画像とベクターを、
IMAGE & VECTOR EDITING
画像とベクターを、
ひとつの画面で
自由に編集。
写真や画像、図形、テキスト、パスを同じキャンバス上で扱えます。マスク、グラデーション、透明度、ベジェ編集にも対応し、Web素材から印刷物のレイアウトまで制作できます。
- 画像・図形・テキストを同じ画面で編集
- パス、ベジェ、マスク、グラデーションに対応
- PC内のフォントファイルを直接読み込み
03
Figma・Illustratorと、
SVG INTEROPERABILITY
Figma・Illustratorと、
SVGでつながる。
FigmaやIllustratorから書き出したSVGを読み込み、図形、画像、パス、グラデーション、マスクなどを可能な範囲で編集できます。HOKUSAIから書き出したSVGを、他の対応ソフトで再編集することもできます。
- Figma由来SVGの画像・パス・マスクを読み込み
- 編集可能なベクター形式をできる限り保持
- HOKUSAIから他のSVG対応ソフトへ受け渡し
04
必要なパーツを、
EXPORT & SLICE
必要なパーツを、
必要な形式で書き出す。
完成したデザインはPNG・JPEG・WebP・SVG形式で書き出せます。スライスを使えば、ボタン、ロゴ、バナーなど必要な範囲だけを個別に書き出すこともできます。
- PNG・JPEG・WebP・SVGに対応
- スライスで必要な範囲だけを書き出し
- 複数のパーツをまとめて書き出し
05
作業データを、
LOCAL FIRST WORKFLOW
作業データを、
自分の手元で管理する。
編集内容はHOKUSAI専用の.hok形式で保存できます。ページ、ステート、レイヤー、オブジェクトの構造を保ったまま、別の端末やブラウザでも作業を再開できます。
- .hok形式で編集可能な状態を保存
- ブラウザ内の自動保存と最近の作業
- 同じ作業中はCtrl + Sで上書き保存
Made for real work
職種を問わず、
職種を問わず、
伝えるためのデザインに。
実際の制作シーンや作業環境をイメージしやすいビジュアルで、HOKUSAIの活用シーンを具体的に紹介します。
デザイナー向け
Webサイト・UIデザイン
画像編集とレイアウト制作を行き来しながら、Webサイトやアプリのデザインを軽快に仕上げられます。Fireworksを利用していた方にもなじみやすい操作感で、画像とベクターを同じ画面上で扱えます。
営業・事務・企画向け
ワイヤーフレーム・提案資料
言葉だけでは伝わりにくい構成や画面イメージを整理し、社内共有や顧客への提案に活用できます。完成した資料はPDFで書き出せるため、営業先への提出やオンラインでの共有も簡単に行えます。
店舗・広報向け
チラシ・名刺・印刷物
用途に合わせたサイズでレイアウトを制作し、PNG・JPEG・WebP・SVGで書き出して、必要に応じて印刷対応ソフトで仕上げられます。
設計・開発向け
画面設計・開発共有
ページ、状態、リンクを整理し、デザインの見た目だけでなく、画面構造や操作の意図まで共有できます。プログラマとの連携にも活用でき、画面遷移や状態違い、必要な画像・SVG素材をまとめて受け渡せます。
Freedom with structure
手軽さだけでも、
手軽さだけでも、
設計だけでもない。
制作の自由度を、
軽快な環境へ。
HOKUSAIは、テンプレートを選ぶだけの簡易ツールにも、大規模な共同UI設計だけに特化したツールにも寄せすぎません。画像とベクターの編集、画面設計、SVG連携、書き出しを軽快につなぎます。
01
画像＋ベクター
写真、図形、テキスト、パスを同じ画面で編集
02
ページ＋ステート
複数画面と状態違いのUIをひとつに整理
03
SVG連携
Figma・Illustratorと読み込み／書き出しで接続
04
スライス出力
必要なパーツを複数形式で個別に書き出し
The best of each workflow
それぞれの良さを、
それぞれの良さを、
HOKUSAIらしくひとつに。
特定のツールを置き換えるだけではなく、制作現場で本当に使いやすい流れを組み合わせます。
画面設計とプロトタイプ
複数ページ、ステート、画面遷移を整理し、制作中の操作イメージまで確認できます。
ベクター・パス・SVG
図形やパスを細かく編集し、SVGを通じて他の制作環境へデータを受け渡せます。
画像とベクターの統合編集
画像加工とレイアウト、スライス書き出しを行き来できる制作感をブラウザへ。
インストール不要の手軽さ
PCのブラウザからすぐに開き、専用ソフトを追加せず制作を始められます。
Built for practical creation
制作を止めないための、
制作を止めないための、
実用的な機能。
日々の制作で使いやすいことを基準に、編集・保存・書き出しを支える機能を揃えています。
ローカルフォント
PC内のフォントファイルを読み込み、ブラウザ上のテキスト編集に使用できます。
最大30,000px
幅・高さとも最大30,000pxまでのキャンバスを作成・編集できます。
自動保存・作業再開
最近の作業をブラウザ内に保存し、スタート画面から再開できます。
.hok専用形式
ページ、ステート、レイヤー、オブジェクトの構造を保ったまま保存できます。
マスク・ベジェ
ベクトルマスク、パス、アンカーポイントを使って自由な形状を編集できます。
スライス・一括出力
必要な範囲を登録し、複数のパーツを用途に合わせた形式で書き出せます。
Local first
作成データは、
作成データは、
原則として端末内に保存。
作成データは、原則として利用者のブラウザまたは端末内に保存されます。重要なデータはHOKUSAI専用の .hok ファイルとして定期的に保存してください。
ブラウザのキャッシュやサイトデータを削除した場合、ブラウザ内の自動保存データが消える可能性があります。一度 .hok ファイルとして保存した後は、同じ作業中であれば Ctrl + S で上書き保存できます。
Start creating
思いついたら、
思いついたら、
すぐに形にできる。
インストール不要。
ブラウザからHOKUSAIを開いて、
画像編集、ベクター編集、画面設計、プロトタイプ制作を始められます。
現在はβ版として提供しています。機能や画面構成は今後変更される場合があります。