> ホーム > ことはじめ > GUI の基本中の基本

GUI の基本中の基本

2001年春現在、アプリケーションソフトは星の数ほどありますし、OS も大小、値段ともに様々なものが存在します。しかし、MacOS の登場以降、パソコンレベルとしては、そのマウスを用いたグラフィカルな操作においてはある程度の基本ができあがっています。ここではそのような、広く通用する操作性に絞って紹介していきます。スクリーンショットは Windows が基本ですが、内容は Windows には限りません。

このページは珍しくスクリーンショット貼りまくりで重いです。

カーソルが命!

パソコンの画面は机のアナロジーです。デスクトップに道具を広げ、ファイルを置き、収納する。その中で実際に作業するとき、我々は手を使って鉛筆を持ち、定規を当て、紙をめくりますね。この手と同じ働きをするのがカーソルです。

なお、マウスカーソルをポインタと呼んだり、文字入力用のカーソルをキャレットと呼んだりすることもありますが、これ以降ではすべてカーソルに統一します。

何より最初に目的の場所にカーソルを

何か作業を始めるとき、最初にすることは「目的の場所にカーソルを合わせること」です。アイコンに合わせる、入力する枠に合わせる、文字と文字の間に合わせる、など。

このときはマウスのボタンを押す必要はありません。というか押さないでください。マウスのボタンを押すということは、「カーソルのある場所で何かをする」ということを意味します。「カーソルを動かす」場合にはボタンは押しません。

カーソルの形の変化を見逃すな

カーソルが目的の場所にあるかどうかは、カーソルに注目してみると分かります。カーソルは何の上に来ているか、今どんな状態かによってその形が変化しているのです。

通常の状態
いまやってるからちょっと待ってね、の状態
いま忙しいからしばらく待ってね、の状態
文字を入力できる部分だよ、の意味
リンク
ウィンドウなどの大きさを変更できる状態。
ここにはドロップできません、の意味
ウィンドウなどを移動できる状態(Macにはこれはないかも)

もひとつ、文字を入力するときのカーソルがありまして、これはただの棒です。

文字を入力するときの | なカーソル

このような棒が点滅しているのがそれです。この棒の右側に文字が入力されていきます。逆に言うと、こういうカーソルが出ていない場合は文字を入力することができません。

(残念ながら今のパソコンは標準状態ではこのカーソルが実に見にくく、また、ブラウザやメールソフトで最も大事なアドレスを入力する部分が小さく、かつプロポーショナルフォントを使っているので .,;: の文字が非常に判別しにくくなっています。グラフィカルなパソコンは決して初心者に優しくなんかないのです。)

[ ↑ content ↑ ]

選ぶ

オブジェクト指向の現在のパソコンでは、何よりもまず操作したい対象を選ぶことから始まります。

「これ」を選ぶ

シングルクリック

1) マウスカーソルを、、、 2) 目的のものの上に合わせてクリック

アイコンや図、表などの「もの」を選ぶ場合はその上でシングルクリックすると選ぶことができます。

「これ」という一つのものを選ぶときは、選びたいものの上にカーソルを合わせ、1回クリックします。(設定によって変わるかもしれませんが、普通は1回です。)選ぶと以下のように見た目が変わります。

1つのウィンドウを選んでいるところ 1つのアイコンを選んでいるところ

デスクトップ上で一つのウィンドウを選んでいるところ。Windows ではこのようにタイトルバー(と呼ばれるウィンドウのいちばん上のところ)の色が他のものと異なるのがいま選択しているウィンドウです。

デスクトップ上で1つのアイコンを選んでいるところ。

Illustrator で1つのオブジェクトを選んでいるところ Office で1つのオブジェクトを選んでいるところ

Adobe Illustrator 上でオブジェクトを1つ選んでいるところ。小さい □ は、ここをつまんで変形できるなどの機能を持っています。

PowerPoint でオブジェクトを1つ選んでいるところ。Illustrator と同じように小さい □ が見えます。枠が太い点線になっています。

名刺MAKER(Win用)で1つのオブジェクトを選んでいるところ

名刺MAKER というソフトでオブジェクトを1つ選んでいるところ。今度は赤い線で囲まれています。

このように、ソフトによって変化はありますが、いま選んでいるものは(線で囲まれるなど)とにかく目立つように工夫されています。いま何が選ばれているのか、よく見てみれば分かるはずなので、思い通りに操作できなくても慌てないで、まずは何が選ばれているのか、確認してみましょう。

[ ↑ content ↑ ]

「ここからここまで」選ぶ

「ここからここまで」という範囲を選ぶ場合はクリックではなく、ドラッグという技を使います。マウスのボタンを押しながらマウスを引きずる、あれです。

例えばデスクトップ上でやってみると以下のようになります。

囲みたい部分のちょっと外側でクリックボタンを押し込み、

そのままドラッグしていきます

「ここまで」でオッケーならそこでクリックボタンを離します

このように点線の四角が伸びていき、選択されているアイコンの色が次々と変化していきます。

このとき、ある特定のアイコンを選択しないように気をつけなければいけません。アイコンとアイコンの間からドラッグし始めます。

間違って1つのアイコンを選択した状態でドラッグし始めると、このようになって、アイコンが動き始めてしまいます。

また、範囲を選択できるときはこのようにカーソルが矢印のない十字の線になる場合もあります。

テキストの場合

文字入力の状態では、マウスを使わなくても範囲を選択することができます。その方法は SHIFT + です。

パソコンにはカーソルキーというものがあります。

このカーソルキーは文字通りカーソルを動かすためのキーです。試しに文字入力できる状態(ワープロなど)でカーソルキーを押してみてください。縦棒 | が押した通りに動くと思います。

このとき、[ SHIFT ] キーを押しながらカーソルキーを押すと、範囲を選択できます。選択する範囲を大きくする、あるいは小さくする間、ずっと [ SHIFT ] キーは押し続けてください。選択し終わったら離してください。

テキストの一部を選択しているところ

マウスで小さい文字の間を選択するのが大変なら、カーソルキーを使うのもかなり有効な方法です。

[ ↑ content ↑ ]

「これとそれとあれ」を選ぶ

「ここからここまで」の場合、基本的に四角の範囲しか選択できないのですが、選びたいものが三角形に並んでいたり、円形に並んでいたらこの方法は使えません。そこで、「これ」の応用で「これとそれとあれ」という選び方も用意されています。

Ctrl を押しながら選んでいく
(ただし、クラリスや Adobe 製品など、「Mac系」のソフトはShiftキー)
Shift を押しながら選んでいく

具体的には下の図のような感じで複数のアイコンを選択することができます。

3つのアイコンを選んでいるところ

選択を解除する

間違って思ったものと違うところを選択してしまうことがよくあります。そんなときは落ち着いて別なところやデスクトップをクリックしてください。

ダブルクリックの失敗例

間違ってシングルクリック ダブルクリックし直そうにも、 文字の上だとこのように名前の修正になってしまう。 デスクトップの上でクリックしましょう。

1】間違ってシングルクリックすると、

2】このようにアイコンが選択される。「あ、間違った」と思ってクリックし直そうとしても、

3】このとき、文字の上にカーソルがあると、アイコンの名前が変更できる状態になり、ダブルクリックできない。

4】そんなときは慌てずに「別なところで」クリックしましょう。

[ ↑ content ↑ ]

反転、色の変化に注意!

基本的に、選択されたものは反転して表示されます。

選択されているウィンドウ 選択されていないウィンドウ
選択されていないテキスト
選択されているテキスト

今使っているソフトはタイトルバーの部分の色がほかのソフトと違います。今選んでいる対象は色が変わって見えます。これが原則。

(反転したときの色は設定次第で変わります。Windows 標準ではもっと濃い青色になると思います。Mac だとグレーになるのかな? ま、簡単に変更できますし、これが変わっただけでも、けっこう雰囲気が変わります。)

[ ↑ content ↑ ]

動かす

基本は選択したものをドラッグします。このとき、このようなカーソルになっていないことを確認してください。このようなカーソルのときはウィンドウの大きさなどが変わります。移動はできません。

アイコンを動かしているところ ウィンドウを動かしているところ
アイコンを動かしているところ ウィンドウを動かしているところ

移動している間は図のように前の状態のものはそのまま表示され、現在移動中のアイコンが薄く、あるいは移動中のオブジェクトの枠が点線で表示されます。そのほか、アプリケーションによって独自の移動中の表示があるかもしれませんが、基本的にはこの2つです。(Windows は実はデフォルトではウィンドウの中身を表示したままリアルタイムに移動できます。PenII, PenIII が当たり前の時代ではもうこの状態のまま使っていてもいいかなぁと思っています。)

ウィンドウはタイトルバーをつかむ

ウィンドウを動かす場合は、ウインドウのいちばん上で、そのウィンドウの名前を表示している部分をつかんでドラッグします。上図の Windows の例でいうと青くなっている部分です。

[ ↑ content ↑ ]

変形する

アイコンの大きさは変えることができませんが、ウィンドウやオブジェクトの縦横の長さを変えることができます。カーソルがこのようなカーソル形になる場所でドラッグするとその形を変えることができます。

1】 ウィンドウの中の境界線を 2】 ドラッグして動かしているところ

いずれも、淡い点線で新しい境界線の位置、新しいウィンドウの枠が表示され、それを動かすことができます。動かしている間はドラッグが基本ですので、思い通りにドラッグできるように練習してください。

(MacOS の場合は枠が二重線で描かれていますが、基本的には同じです。)

3】ウィンドウのサイズを変えているところ

オブジェクトの場合は以下のようになります。

1】□のところにカーソルを合わせると、上のような形に変わるので、

2】そこからドラッグするとこのようにオブジェクトを変形できる。

ドローソフト、レイアウトソフトではこのようにオブジェクトごとに四角い枠が表示されます。その中で、□や■に見える部分にカーソルを合わせると図のようにカーソルの形が変わるので、そこでドラッグし始めるとオブジェクトの形を変えることができます。

いずれにしても基本はマウスカーソルの形の変化を見逃さない、ということにつきます。

3】こんな感じに変形できる。

[ ↑ content ↑ ]

実行する/ファイルを開く

ダブルクリック。基本中の基本です。アプリか書類のアイコンをダブルクリック。

[ ↑ content ↑ ]

フォルダを開く

フォルダのアイコンをダブルクリックすると、そのフォルダを開いて、中に入っているフォルダやファイルの一覧を見ることができます。

「マイコンピュータ」、「MacintoshHD」は「ドライブ」ですが、これは「フォルダ」の親玉だと思ってください。

[ ↑ content ↑ ]

文字を入力する

フィールドを選ぶ

上で触れているように、文字を入力できるときはカーソルが | このようになります。基本的には図のように、枠が用意されていて、マウスカーソルが

1】 になるところでクリックします。すると、
2】このように文字を入力することができる状態になります。
3】枠が複数あるときはそれぞれの枠のところ同じ操作をくり返します。

また、この枠の用意の仕方、入力する枠を選んだときとそうでないときの動作はアプリによって少しずつ異なります。以下にいくつかの例を挙げましょう。

(なお、普通にワープロで字を打つことについては、わざわざ説明する必要もないので端折ります。)

[ ↑ content ↑ ]

ブラウザ

WWW ブラウザなどはページの内容を表示する部分と、その URL(アドレス)を表示、入力する部分に分かれています。

ブラウザのウィンドウ。選んでいる場所によってできることが違う。

また、掲示板などでは入力できる枠の中で一度クリックしてあげないと | のカーソルが表示されません。

[ ↑ content ↑ ]

テキストエリアを作る

PowerPoint やドロー系のソフトでは、ワープロのように最初から文字を書けるのではなく、文字を入力する枠をまず用意し、その中に文字を書き込んでいきます。

1】テキストエリアボタンを押し、 2】枠を用意すると、

図は PowerPoint での手順ですが、Microsoft Office なら Word などでも一緒ですし、他のドロー系のソフトでも、ボタンや枠の見え方が違うだけで手順は一緒です。

3】このように文字を入力することができます。

[ ↑ content ↑ ]

テキストエリアを選択する

テキストエリアの選択も基本的には一緒ですが、大きく分けて2パターンに分かれます。

MS Office系

Microsoft Office 系のソフトはテキストエリアをクリックするとすぐに文字入力ができる状態になります。例えば PowerPoint の場合は

テキストエリアの上でクリックすると、
テキストエリアの上でクリックすると、
テキストエリアの上でクリックすると、
いきなり文字が入力できるようになる。

このように、テキストエリアをクリックするといきなり文字入力できる状態になります。

また、Word でも

表の中も ワンクリックで編集できる
表の中も ワンクリックで編集できる

このようにすぐに表の中の文字を編集することができるようになります。

ただこのように、MS Office 系のソフトではワンクリックで編集モードに入れる代わりに、カーソルの位置が微妙にずれただけで、文字の編集ではなくオブジェクトの移動や表の境界線の移動になったりするので、なかなか注意が必要です。

[ ↑ content ↑ ]

Adobe 製品など

対してそれ以外のソフトでは

1】一度めのクリックでテキストエリア全体が選択され、

2】もう一度そのうえでクリックすると今度は文字入力ができるようになる

ものが多いです。図は Adobe の Illustrator ですが、クラリスワークスなどもそうです。

[ ↑ content ↑ ]

独自のダイアログが表示されるタイプ

これまでの例のように直接文字を入力できるものもありますが、下図のように文字入力用のダイアログが別に表示され、その中で文字を入力するタイプのソフトも数多くあります。

名刺MAKER のテキストダイアログ Photoshop 5.5 以前のテキストダイアログ

目的の枠をダブルクリックするなどすると上のようなダイアログが表示されますので、この中で文字の編集を行います。

[ ↑ content ↑ ]