• aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. デザインの記事
  4. InDesignで縦組みテキスト内の縦中横をまとめて設定する

InDesignで縦組みテキスト内の縦中横をまとめて設定する

  • 2019.09.09
  • デザイン
  • Adobe その他
普段はウェブやUIのデザインをすることが多いのですが、先日縦組みのテキストを扱うのにInDesignを触ることがあったのでメモとして残しておきたいと思います。今回は縦組みテキストの中で、横書きにテキストを配置する「縦中横」について、InDesignを使ってまとめて設定する方法になります。   縦中横では半角の英数字が1文字分の高さの領域に横に並ぶ形になり、少ない文字数であれば読みやすくなるという効果があります。横書きが多いウェブではあまり目にしませんが、印刷物などの媒体では一般的であると言えます。では早速みていきたいと思います。   まずはドキュメントの新規作成をします。InDesignでは「レイアウトグリッド」と「マージン・段組」で方眼か白紙のフォーマットを選択できます。今回は縦組みの文章を使いますので、ドキュメントの設定をしていきます。 InDesignで縦組みテキスト内の縦中横をまとめて設定する InDesignで縦組みテキスト内の縦中横をまとめて設定する   ツールパネルより「縦組み文字ツール」でテキストの入力エリアを作成します。この辺りはIllustratorやPhotoshopと同じですね。 InDesignで縦組みテキスト内の縦中横をまとめて設定する   サンプルのテキストを作成してみました。本文には全角の和文テキストと半角数字、半角欧文テキストが混在しています。半角英数字は縦組みの場合、横向きに配置されます。ここではわかりやすいように文字色を変更しています。全角の英数字は和文テキストと同じ向きで表示されています。 InDesignで縦組みテキスト内の縦中横をまとめて設定する   縦中横を適用したい部分を選択します。「文字パネル」のサブメニューから「縦中横」を選択します。 InDesignで縦組みテキスト内の縦中横をまとめて設定する   文字が回転して表示され、和文テキストと同じ向きになりました。高さは全角文字1つ分の範囲に収まり、横向きに文字が並びます。レイアウト上、文字数が多い場合には注意が必要です。 InDesignで縦組みテキスト内の縦中横をまとめて設定する   縦中横を適用したテキストには、細かい位置を調整することができます。テキストを選択し「文字パネル」のサブメニューから「縦中横設定」を選択します。 InDesignで縦組みテキスト内の縦中横をまとめて設定する   縦中横設定のパネルが表示され、上下左右の各方向に配置場所を細かく設定することができます。プレビューにチェックしておくとわかりやすいですね。 InDesignで縦組みテキスト内の縦中横をまとめて設定する   ただ、文中に縦中横を適用させる箇所が多い場合には、このような形で一つひとつ設定していては大変です。そんな時はまとめて縦中横を適用させることができます。対象のテキストを全て選択し、「段落パネル」のサブメニューから「自動縦中横設定」の選択します。 InDesignで縦組みテキスト内の縦中横をまとめて設定する   自動縦中横設定パネルが表示され、文中の対象テキストへの縦中横設定をまとめて行うことができます。縦中横をするテキストの文字数の上限を設定でき、その文字数を超えるものは適用されないようにすることができます。デフォルトでは数字だけですが、「欧文も含める」にチェックすると欧文にも適用されます。 InDesignで縦組みテキスト内の縦中横をまとめて設定する   このように長文の中に対象テキストがたくさん含まれていても一括で縦中横を適用することができます。 InDesignで縦組みテキスト内の縦中横をまとめて設定する   ちなみに、横組みでなく、向きを揃えるだけであれば、「文字パネル」から文字を回転させることで編集することができます。 InDesignで縦組みテキスト内の縦中横をまとめて設定する   また、InDesignはこのように縦中横だけでなく、ルビの追記や強調などに使われる圏点も簡単に設定することができます。 InDesignで縦組みテキスト内の縦中横をまとめて設定する InDesignで縦組みテキスト内の縦中横をまとめて設定する   ウェブのデザインワークではあまり使う出番がないInDesignですが、印刷物デザインや、文書作成には圧倒的な威力を発揮します。AdobeCCのコンプリートプランユーザーであれば使うことができるので、用途に合わせて使い分けるのがいいですね。
XでシェアLINEで送るはてブに追加

この記事を書いた人オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はダイエットコーラとチョコレートが欠かせないアラフォーWebクリエイター。

Sponsored Link

  • Showcase
  • Startify UI
  • Functional Gradation Generator
  • Coloooors

keyword search

categories

  • デザイン(30)
  • Photoshop(26)
  • ワークショップ(24)
  • コーディング(18)
  • Sketch(16)
  • Illustrator(12)
  • カラースキーム(10)
  • タイポグラフィ(8)
  • Adobe その他(8)
  • フォトグラフィ(7)
  • Lightroom(4)
  • WordPress(4)
  • ナレッジ(4)
  • サイト運営(3)
  • Figma(2)
  • AfterEffects(2)
  • InVision(1)
  • Premiere(1)

recent articles

  • Figmaで柔らかな印象のメッシュグラデーションを作成する
    read more

    Figmaで柔らかな印象のメッシュグラデーションを作成する

    2022.12.09/Figma
  • Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
    read more

    Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する

    2022.09.23/Photoshop
  • Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
    read more

    Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する

    2022.06.10/Photoshop
  • デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
    read more

    デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)

    2022.06.03/デザイン
  • 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
    read more

    【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点

    2022.04.22/デザイン
  • 安さやチープな印象を強調させるデザインを考えてみる
    read more

    安さやチープな印象を強調させるデザインを考えてみる

    2022.04.01/デザイン
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト支援
  • クリエイティブ制作
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact