Dreamweaver/Photoshop経験者優遇。WEBデザイナー/WEBディレクター/ネットショップ店長など【WEB・モバイル業界専門の求人情報サイト】
お仕事情報カタログ ウェブタント サポタント株式会社 人材派遣サポートセンター:0120-317-133 社団法人日本人材派遣協会 / WEB広告研究会 / EC協議会賛助会 / 東京商工会議所 会員 プライバシーマーク
一般労働者派遣:(般)13-302759 / 有料職業紹介:13-ユ-302233

会社概要お問い合わせ法人のお客様へ就業中スタッフ専用ログイン
ホーム お仕事を探す スキルアップ研修 ウェブ・モバイルプチノウハウ お仕事情報メルマガ 初めての方へ
職種からお仕事情報を探す  WebディレクターWebデザイナーコーダーネットショップ運営モバイルサイトその他   今週の特集
ネットショップに役立つプログラミングを楽しく伝授
Excelで流れ図(フローチャート)を作ってみよう

では、流れ図のいろいろと具体例を・・・の前に、流れ図(フローチャート)の描き方を簡単にご紹介しておきます。

流れ図を描くには、昔は(いまもそういうスタイルの方もいらっしゃるかと思いますが、ご容赦ください)、製図用シャープペンシル(0.3mmの芯のやつ)、細かく消せる砂消しゴムのようなもの、ぺらっぺらの方眼紙、テンプレート定規などを用いました。

今では、もちろんパソコンで書くようになってきています。
流れ図を書くための、専門的なソフトウェアもいくつか用意されています。


が、さくさくっと流れ図を書くのには、Excel で十分です。

Excelで流れ図を各方法について、簡単にご紹介しましょう。


まず、Excelを方眼紙として使うことをご想像ください。

そうです。ひとつひとつのセルを、そうですね。5mm×5mmくらいのの方眼とするのが使いやすいでしょう。

厳密には、5mmではないのですが、おおむね 20ピクセル〜21ピクセルのセルを作るのがいいでしょう。

#21ピクセルだと、印刷したときにかなり5mmに近くなります。なんとなく21ピクセルの端数感覚がイヤなかたは、20ピクセルにしても差し支えないでしょう。

(1) シートの全体を選択するために、矢印の箇所をクリックします。

webtant_user_14_1178207273.gif

(2) すると、全体が選択されます。

webtant_user_14_1178207279.gif

(3) AとBの間の線をドラッグし、21ピクセルになるよう調整します。

webtant_user_14_1178207285.gif

(4) すると、すべてのセルの横幅が、21ピクセルになります。

webtant_user_14_1178207289.gif

(5) 次は、高さを調整します。1と2の間の線をドラッグして21ピクセルに調整します。

webtant_user_14_1178207293.gif

(6) はい、これで 高さ(縦)幅(横)21ピクセル(約5mm)の方眼紙のようなエクセルシートが完成しました。

webtant_user_14_1178207296.gif

(7) 次に「オートシェイプ」というものをつかっていくのですが、その「オートシェイプ」が方眼紙にぴったりと吸い付くような設定を行います。
 左下の[オートシェイプの調整]→[位置合わせ]→[グリッド]を選びます。

webtant_user_14_1178207300.gif

(8) この[グリッド]という表示は、On/Offの切り替えになっています。アイコンの表示が、下のように、押されたような状態になっていることを確認してください。

webtant_user_14_1178207304.gif

(9) さて、いよいよなにかオートシェイプをおいてみましょう。オートシェイプの意味は、またおいおい紹介していきますが、とりあえず [オートシェイプ]→[フローチャート]→[処理]をえらんでください。

webtant_user_14_1178207308.gif

(10) その後、シートの適当なところにドラッグしてみてください。四角い箱が描かれます。そして、(7)の[位置合わせ]→[グリッド]が正しく設定できていたら、方眼のマス目にそろうようなかたちで、箱が描かれます。うまくいかなかったかたは、(7)(8)の手順を見直してください。

webtant_user_14_1178207312.gif

(11) では、ここになにか書き込んでみましょう。この四角い箱「処理のオートシェイプ」を右クリックするとポップアップメニューが表示されますので、[テキストの追加]を選んでください。

webtant_user_14_1178207315.gif

(12) ためしに「風が吹く」と入力してみます。

webtant_user_14_1178207319.gif

(13) テキストが左上に表示されました。真ん中に表示されたほうが、きれいにみえるので、テキストを真ん中にしてみましょう。箱の上を右クリックして[オートシェイプの書式設定]を選んでください。

webtant_user_14_1178207323.gif


(14) オートシェイプの書式設定ダイアログが開きます。
※このとき「テキスト編集モード」だと、うまく「書式設定のダイアログ」が開かない場合があります。[フォント]タブしか表示されていないようでしたら、やり直してみてください。
フォントはやや小さいほうが、収まりがよいため、9ポイントに設定してみましょう。

webtant_user_14_1177934362.gif


(15) つづけて[配置]を選び、文字の配置で、横位置も縦位置も、中央揃えを選んで、OKをクリックしましょう。

webtant_user_14_1177934375.gif

(16) 「風が吹く」の文字がひとまわり小さくなって、中央揃えで表示されます。

webtant_user_14_1178207330.gif

(17) さて、つぎの処理を追加します。「風が吹く」の箱を選んで、コピー&ペーストしましょう。

webtant_user_14_1178207333.gif

(18) テキストを、「埃が舞う」に変えてみてください。

webtant_user_14_1178207337.gif

(19) この2つの箱をつなぎます。[オートシェイプ]→[コネクタ]→[直線コネクタ]を選んでください。

webtant_user_14_1178207340.gif

(20) 上の箱から下の箱に、ドラッグします。すると・・・

webtant_user_14_1178207344.gif

(21) 上下の箱をつなぐような線が描けます。

webtant_user_14_1178207347.gif

画面をキャプチャして、貼り付けて・・・で、21ステップにもなってしまいました。
まだ、流れ図とよぶには、程遠いですが、Excelで流れ図を作る方法は・・・

 [オートシェイプ]→[フローチャート]から、適切な記号を選んで、方眼紙の上におき、テキストを追加して、それらをコネクタでつなぐ。

概ねこの手順の繰り返しとなります。


ちょっとだらだらとした感じの説明になりましたが、ご想像いただけましたでしょうか?


今回ご紹介した、Excelを方眼紙っぽく使う方法は、実は、技術者仲間の間では、好き嫌いが激しく分かれるところだったりします。

表計算ソフトは、表計算するためにあるのだ。それが美しい使い方であって、図面を描くために作られたソフトではない。

データ(流れ図の意味する本質を構成する要素)と見た目(レイアウト)は、システムを生業にしている技術者としては、分離して扱うべきだ。

Excelで書いてしまうと情報として処理するなどの応用力に欠けてしまう・・・云々・・・いろいろその道やこだわりには深いなにかがあるようです。


Excelを方眼紙に使うと、定規とシャーペンで紙に書くよりも、きれいに図面を作ることができますし、もちろん修正もしやすいです。

ですから、流れ図に限らず、オフィスの間取り図を書くときや、ちょっとした地図を描くときなどに、使ってみられてはいかがでしょうか。


☆今回つかった、便利なツール。「FastStone Caputure」

画面イメージを GIF画像にするのにとっても便利なツール。
たとえば、ブラウザでたてになが〜い画面を、「一気にスクロールしながらキャプチャする」という機能がついていて、とっても便利です。

http://www.forest.impress.co.jp/article/2006/10/02/fscapture.html




ひさやん
プログラム暦25年。現在32歳。

飲んで騒いでがスキなばかりに、完全なるヲタクになりそこねたオトコ。
ファミコンの代わりにPC-8001、MSXと一緒に育つ。

MCSE,ORACLE MASTER Platinum と数々の業界系資格をもつ。

座右の銘は「やっぱり細部に神は宿る」。

プログラマとかSEよりも、実はアーキテクトと呼ばれたい。
「ロジック美」を追及したい。
みなさまのお役にたてるようがんばります。

Ajaxに強力ライバル出現!?
専門用語のカタカナ英語は難しい
イベントドリブン を覚えましょう
流れ図(フローチャート)が逆流するとき
流れ図(フローチャート)の主な記号
Excelで流れ図(フローチャート)を作ってみよう
手順といえば流れ図。それってロジカルシンキング?
これからの時代は LL でいこう!
----------------------------------------------------
全ての記事を見る

ノウハウコラム
現場で使えるDreamweaver & Fireworksの
「イラストを描く前に、イラストを理解すること」をモットーに
ネットショップでのPhotoshop活用術
デジカメ商品撮影 情報満載図書館
ネットショップに役立つプログラミングを楽しく伝授
【トントンのネットショップ運営繁盛講座】
売るための"サイト構築テクニック
心を動かすお店の作り方
御社の「売り」は何ですか?
スタッフ紹介
とこみゆきの良新日記
大池めぐみブログ
佐藤麻衣子ブログ
笠原華子ブログ
橋和田智子ブログ
平岡典子ブログ
野崎朋子ブログ
高見英作ブログ
松本ひとみブログ
高橋理華ブログ
椎木美由紀ブログ
細畠牧奈ブログ
外薗聖子ブログ

スタッフコラム
ちょっと耳より♪Web/Mobileコラム

 サポタントSTAFFが、現場で感じた
 スキルUP情報を交代でお届け♪
今週のイチオシ企業様

 毎週、コーディネータの
 おすすめ企業様をご紹介します♪
大池めぐみのイチオシ企業様
佐藤麻衣子のイチオシ企業様
笠原華子のイチオシ企業様
高見英作のイチオシ企業様
椎木美由紀のイチオシ企業様
細畠牧奈のイチオシ企業様


お仕事を探す
東京神奈川埼玉千葉 大阪京都奈良兵庫 愛知静岡岐阜

スタッフ登録する
派遣スタッフエントリー 登録から契約までの流れ 派遣スタッフ登録特典

このページのトップへ

ウェブタント運営会社 サポタント株式会社 http://www.supotant.com/
ネット業界で目標実現を目指すお客様を「おブッチギリ」に「愛」たっぷりにお手伝いする【サポート担当】の会社です。
IT業界で、就職・転職を目指している方、人材を募集されている企業の人事採用(雇用)担当者さま、ネットショップを立ち上げられたい方、ネット通販を運営されている経営者の方々のお手伝いをさせていただきます!
主な事業内容
■一般労働者派遣事業:(般)13-302759  ■有料職業紹介事業:13-ユ-302233
WEBデザイナー、WEBディレクター、WEBプロデューサ、WEBマスター、ネットショップ店長・運営者、ブログ編集管理者、ソーシャルネットワーキングの制作・管理業務者、プログラマー・保守、マーケティング企画、メルマガライター、WEB系企業一般事務員など、即戦力スタッフを派遣・紹介いたします。未経験者には、技術研修を行い、スキルアップを図ります。(中途採用もあり)
<主な派遣先企業様実績 最寄り駅>
【関東】東京:銀座、新橋、有楽町、目黒、代官山、渋谷、神谷町、表参道、恵比寿、六本木、飯田橋、大森、 神奈川:横浜、新横浜、茅ヶ崎
【関西】大阪:梅田、本町、心斎橋、なんば、三ノ宮、神戸、京都
■ECサイトセミナーの企画及び運営事務局
サイト開設、売り上げUP、集客UP、SEO、SEM、PPCなど、EC業界の最新情報をお届けするセミナーを企画・運営しております。
参加団体 社団法人 日本人材派遣協会 会員 / 東京商工会議所 / Web広告研究会 / オンラインショップマスターズクラブ / NPO法人 キープラネット / 全国イーコマース協議会

 トップページ会社概要・各拠点連絡先 個人情報保護方針法人のお客様へ