投稿の区切りと囲みを、タップひとつで。無料ツール「区切り線・囲み枠ジェネレーター」を公開しました。

SNSの投稿が一続きの文字の塊に見えてしまう、プロフィール欄にもう少しメリハリをつけたい。そんなとき、区切りの一本や小さな囲みがあるだけで読みやすさは変わります。デザイン事務所AMIXは、投稿を装飾する区切り線と、テキストを罫線で囲む囲み枠をコピペで作れる無料Webツール「区切り線・囲み枠ジェネレーター」を公開しました。区切り線は並んだラインをタップするだけ、囲み枠は文字を入力してスタイルを選ぶだけで組み上がります。アプリのインストールやアカウント登録は不要で、ブラウザを開けばすぐに使い始められます。

どんなツールか

本ツールは、画面上部の「区切り線」「囲み枠」の2つのモードを切り替えて使います。「区切り線」モードでは罫線や記号を並べた定番のラインが一覧で並び、気に入ったものをタップするとその場でクリップボードへコピーされます。「囲み枠」モードでは、「囲みたい文字」の欄に入れたテキストが複数のスタイルで囲まれた状態でプレビューされ、こちらもタップでコピーできます。

同じ装飾を手作業で作ると、記号を一つずつ探して並べ、長さを目で合わせる手間がかかります。とくに囲み枠は上下の横線と中の文字幅が合わないと不格好になりがちです。四方を囲む罫線スタイルでは、入力した文字の幅を計算して枠を組み直します。「装飾（星）」の上下のラインは固定長です。処理はすべてお使いのブラウザ内で完結し、入力した文字が当方のサーバーへ送信・保存されることはありません。生成物はUnicode文字なので、貼り付けた先での手直しも自由です。

収録している区切り線

「区切り線」モードには20種類のラインが並んでいます。前半は実務的なもので、─ の細い直線と ━ の太い直線、点線風の ┈、破線の ╌、中点を連ねた ・・・・・。話題の転換や箇条書きの前後を切るだけなら、この系統で足ります。後半は雰囲気づくり向けの装飾ラインです。⋆ を等間隔に並べたもの、✦ ✧ の交互、❁ や ✿ の花記号、♡ ─ ♡ のハートと線、▸▹ の小さな三角、◦ の白丸、○● の白黒交互、━╋━╋━ の十字入り。さらに ˗ˏˋ ★ ˎˊ˗ や ｡:*ﾟ･ﾟ*:｡ の顔文字系装飾、꒰ ꒱ を並べた括弧のラインもあります。角丸の ╭┈┈┈┈┈┈┈┈╮ と ╰┈┈┈┈┈┈┈┈╯ は上辺・下辺が別々に収録されているため、この2本のあいだに文章を挟めば、高さを自分で決めた枠が作れます。

囲み枠は「等幅で崩れない」ことが前提

囲み枠モードには8つのスタイルがあります。「角（細）」は ┌┐└┘ の細い枠、「角丸」は ╭╮╰╯ のやわらかい枠、「太線」は ┏┓┗┛、「二重線」は ╔╗╚╝、「破線」は縦横を ┄ と ┆ で描いた枠。加えて、半角の = を上下に敷く「シンプル（＝）」、各行の頭に ▍ を置くだけの「引用風（崩れにくい）」、｡ﾟ•┈┈┈┈┈┈┈•ﾟ｡ で上下を飾る「装飾（星）」です。

枠の組み方には前提があります。本ツールは罫線と全角文字を幅2、半角文字を幅1のセルとして計算し、余白を全角スペースで詰め、半端に1セル残った場合を半角スペースで補って揃えています。つまり罫線が全角幅で表示される環境でいちばんきれいに揃う設計です。罫線や文字の実際の幅は貼り付け先のフォントに依存します。スマートフォンでも揃うとは限らず、罫線を半角幅で描く環境などでは右側がずれて見えることがあります。半角英数字や絵文字が混ざる行も幅が揃いにくくなります。ずれが気になるときは、右側に罫線がない「引用風（崩れにくい）」を選ぶのが確実です。

主な機能・特徴

装飾を「作る」より「選ぶ」に寄せた設計です。

• 「区切り線」モードに20種類のラインを収録。直線・点線から装飾ライン、角丸枠の上辺・下辺までを一覧で並べており、探す手間がかかりません。
• 一覧の各行をタップすると内容がコピーされ、ボタンの表示が「コピー」から「済み」に変わります。Enterキーやスペースキーでも実行できます。表示が変わってもコピーに失敗する場合があるため、貼り付け結果も確認してください。
• 「囲み枠」モードは「角（細）」「角丸」「太線」「二重線」「破線」「シンプル（＝）」「引用風（崩れにくい）」「装飾（星）」の8スタイル。入力を変えると全プレビューが同時に更新されるので、見比べて選べます。
• 入力欄で改行すれば複数行をまとめて囲めます。四方を囲む罫線スタイルでは、いちばん長い行の計算上の幅に合わせて横幅が決まります。表示が揃うかは貼り付け先でも確認してください。
• 全角文字を幅2として計算するので日本語をそのまま囲めます。入力欄を空にすると「サンプル」の文字で仮組みされ、枠の形だけを先に確認できます。

使い方

まず上部で「区切り線」または「囲み枠」を選びます。「区切り線」なら使いたいラインをタップするだけで完了です。あとは投稿欄やプロフィール欄でCtrl+V（Macの場合はCmd+V）を押して貼り付けます。「囲み枠」では「囲みたい文字」の欄にテキストを入力します。初期状態では「おしらせ」が入っているので、これを書き換えるのがいちばん早いでしょう。入力すると8スタイルのプレビューが並ぶので、崩れていないもの・雰囲気の合うものを選んでタップします。複数行を囲むときは入力欄の中で改行してから選びます。貼り付け先が等幅表示でない場合は、貼ってから見え方を確認し、崩れていれば別のスタイルに切り替えてください。

活用シーン

• SNSの長めの投稿で、話題が切り替わる箇所に区切りを入れたいとき
• プロフィール欄で、自己紹介と実績、連絡先のまとまりを分けたいとき
• 告知投稿の日程や会場、価格だけを枠で囲んで目立たせたいとき
• メモアプリやノートアプリで、見出しらしい見た目を手早く作りたいとき
• テキストしか使えない入力欄で、画像を使わずに情報を整理したいとき

装飾の目的は「にぎやかにすること」ではなく「読む順番を作ること」です。閲覧環境を選べない場所では、四方を囲む枠より区切り線1本や左側だけの装飾のほうが破綻しません。

ご利用にあたって

本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。生成される区切り線・囲み枠はUnicode文字で構成されているため、お使いのOS・ブラウザ・フォントによって表示が異なる、または正しく表示されない場合があります。とくに囲み枠は罫線が全角幅で描かれる環境を前提に組んでいるため、等幅でない環境や幅の狭い画面では、線が揃わない・行が折り返して崩れることがあります。ブラウザの種類・バージョンや端末環境によって表示や動作が異なる場合がある点、本ツールの仕様・内容は予告なく変更または提供を終了する場合がある点にもご留意ください。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、AMIXは責任を負いかねます。

投稿を少し読みやすくしたいとき、告知の要点を目立たせたいときに、ぜひお試しください。