Getting started

HOKUSAIの使い方

基本操作からSVG連携、複数ページ、プロトタイプ、保存・書き出しまで、HOKUSAIでできることをまとめています。

HOKUSAIでできること

HOKUSAIは、ブラウザ上で画像編集・ベクター編集・レイアウト制作・複数ページ管理・簡単なプロトタイプ作成まで行えるデザインツールです。インストール不要で、PCのブラウザからすぐに使えます。

幅と高さを指定して、新しいキャンバスを作成できます。Web用バナー、画像制作、画面デザインなど、用途に合わせたサイズから作業を始められます。

PNG・JPEG・WebP・SVGなどのファイルを読み込んで編集できます。HOKUSAI専用形式の.hokファイルを開けば、保存時のページやレイヤー、編集状態を保ったまま作業を再開できます。

矩形・円・線・テキスト・画像などをキャンバスへ配置できます。各オブジェクトは、位置・サイズ・色・線・透明度などを個別に調整できます。

複数のオブジェクトをまとめて選択し、移動・複製・削除・整列・グループ化できます。まとまりごとに管理することで、複雑なデザインも整理しやすくなります。

パスやベジェ曲線を使って、自由な形状を作成・編集できます。アンカーポイントやハンドルを操作し、細かな形状調整も行えます。

図形やパスを使って、画像やオブジェクトの一部だけを表示できます。画像を円形や自由な形に切り抜いたり、複数要素をまとめてマスクしたりできます。

オブジェクトの塗りに単色やグラデーションを設定できます。透明度、線の太さ、線色なども調整でき、立体感や奥行きのある表現が可能です。

お持ちのフォントファイルをHOKUSAIへ読み込み、テキスト編集に使用できます。専用アプリや追加ソフトをインストールせず、ブラウザ上でローカルフォントを利用できます。

FigmaやIllustratorから書き出したSVGを読み込み、図形・画像・パス・グラデーション・マスクなどを可能な範囲で編集可能なオブジェクトとして扱えます。

HOKUSAIで作成したデザインをSVGとして書き出し、FigmaやIllustratorなどで開いて再編集できます。ベクター形式を保ったまま、他の制作環境へ受け渡せます。

1つの.hokファイル内に複数のページやステートを作成できます。Webサイトの各画面、バナーの別案、状態違いのUIなどを1つのデータでまとめて管理できます。

オブジェクトやページ同士をリンクし、クリック時の画面遷移を設定できます。完成前のWebサイトやアプリ画面を、実際の操作に近い形で確認できます。

キャンバス内の必要な範囲をスライスとして指定し、その部分だけを書き出せます。ボタン・ロゴ・バナー・画像パーツなどを個別に書き出す際に便利です。

完成したデザインをPNG・JPEG・WebP・SVG形式で書き出せます。用途に応じて画像形式やベクター形式を選び、Webサイトや資料、他のデザインソフトで利用できます。

編集内容はHOKUSAI専用の.hok形式で保存できます。ページ、ステート、レイヤー、オブジェクトなどの構造を保ったまま、後日続きから編集できます。

最近編集したデータはブラウザ内へ一時保存され、スタート画面から作業を再開できます。保存前に画面を閉じた場合でも、直前の状態から復元できる場合があります。

HOKUSAIは、ページ・ステート・レイヤー・オブジェクトを分けて管理する独自のドキュメント構造を採用しています。画像編集だけでなく、Web画面制作や状態違いのデザインにも対応しやすい設計です。

現在はPNG・JPEG・WebP・SVG・.hokに対応しています。Figma側で文字がパス化されたSVGは、HOKUSAIでも文字ではなくベクターパスとして読み込まれます。複雑なフィルター、ぼかし、影、特殊なマスクなどは簡略化される場合があります。