wegtwr
だいたいのことは・・・Excelでできます!
というわけで、Connect : の画像はほとんどExcelとウェブアートデザイナーで作成されていたりします。Photoshopも持ってないことはないのですが、バージョンが古かったり使い慣れてなかったりします...

ちなみに、今回のデザイン講座はExcel2007/2010のみ対応ですのでご注意ください。

それでは以下からどうぞ。


記事の読み込み中...
読み込みが完了しない場合は、JavaScriptが有効になっているか確認してください。
何故Excelなのか?
wqdew
左からExcel2007,PhotoshopCS5,PaintShopPro,GIMP

管理人は何故Excelでデザインをするのでしょうか?以下をお読みください。

1.安く済む
まずなんといってもこれでしょう。安かろう悪かろうではありません、

Adobe Photoshop CS5 Extendedの場合1個買うだけで
140,700円かかります。(AdobeStore価格)

Elementsの場合は14,490円ですが、WebデザインをするならElementsはあまりおすすめできません。

WindowsPCを1台買うとしましょう。NECとかたいていのメーカーさんはMicrosoft Office Personal(Word,Excel,Outlookのみ搭載)をバンドルして販売しているパターンが多く、それらのPCを買うとほぼExcelが安く付いてきます。管理人の場合ですと、画像編集と保存にはもうひとつ、ホームページ・ビルダーについてくるウェブアートデザイナーを利用するので +14,800円(JustMyShop価格)ほど掛かっておりますが。基本的にビルダー本体は使わないのでOSが非対応になるまでは買わなくて済む形となります。

2.容易でシンプルに
詳細は後述しますが、やりたい動作が結構直感的にできます。Photoshopはたしかにすごく細かく設定できますが、初心者にはまったくわからず、また入門本が必須の状況になっています。ある程度の効果はExcel2007にバージョンアップされてからすごく強化されており、買って損はないでしょう。リボンUIは慣れると使いやすいので是非覚えていただきたいと思います。

3.スペックの要求がきつくない
用語解説
プロセッサー : CPU(中央処理装置)のこと
RAM(Random Access Memory) : メインメモリー
ハードディスク : 主にパソコンのデータを保存しているドライブ
ディスプレイ : パソコンから出力された映像を表示する画面
解像度 : パソコンの場合通常px(ピクセル)であらわされる画面に表示できるピクセルの数

Photoshopのウェブサイトを見てみると、
- インテルR PentiumR 4以上、またはAMD AthlonR 64以上のプロセッサー
- MicrosoftR WindowsR XP(Service Pack 3)日本語版、Windows VistaR Home Premium、Business、Ultimate、Enterprise(Service Pack 1)日本語版(Service Pack 2を推奨)、WindowsR 7 日本語版
- 1GB以上のRAM
- 2GB以上の空き容量のあるハードディスク。ただし、インストール時には追加の空き容量が必要(取り外し可能なフラッシュメモリを利用したストレージデバイス上にはインストール不可)
- 1,024x768以上の画面解像度をサポートするディスプレイ(1,280x800以上を推奨)、256MB以上のVRAMを搭載した16-bitカラー表示が可能なハードウェアアクセラレーション対応のOpenGLRグラフィックカード
と書いてありますが実際Pentium4だとつらかったり、XGAディスプレイではキャンバス操作が微妙な感じだったりします。管理人のPhotoshop利用マシンはUXGA(1600x1200)ですが、それでもちょっと辛い感じです。

対するExcel 2010はといいますと、
- 500 MHz 以上のプロセッサ
- Windows XP Service Pack (SP) 3 (32 ビット オペレーティング システム (OS) のみ) または Windows Vista SP1、Windows 7、MSXML 6.0 が適用された Windows Server 2003 R2、Windows Server 2008、またはそれ以降の 32 ビット/64 ビット OS
- 256 MB 以上の RAM
- 2.0 GB のディスク空き容量
- 1024 x 576 以上の解像度のモニター
とPhotoshopより低かったりします。個人的にはPentiumM 1GHz以上あればそこそこ動くと思います。Netbook解像度にも対応はしていますが、Atomプロセッサでの動作は正直微妙です。
グラデーションは10段階まで設定可能!
sdsdv
Excel2007から新たにグラデーションの段階が2色から10色まで変えられるようになりました!Connect : のトップ画像背景も、
grwg
青色の4段階構成になっていたりします。さらに%で区切ることができるので結構細かいグラデーション効果が可能となっています。

ちなみにテキストボックスの文字も、2段階で同じ色を指定するとアンチエイリアスがかかったりします。是非お試しを。
ある程度の図形効果は、標準搭載
fwsf
図形やテキストの効果は、知識やセンス等があまりなくても、このような感じで標準でついていますのでクリックするだけで画像右のような効果が簡単につけられます。もちろん書式設定で詳細に色やぼかし具合を設定することができます。
注意:Excelが対応していない表現方法等...
efwef
Excel2003まであった画像の塗りつぶしに斜線等を指定できる"パターン",Photoshop等でテキストや図形を管理する"レイヤー"機能は搭載されていませんのでご注意ください。
保存方法
hbih
Excelにも標準でhtmlと画像にわけて保存する機能がありますが、管理人は透過pngで保存したい場合はそちらを利用し、そのほかの場合は一度キャプチャソフトでExcelの画面をキャプチャしてウェブアートデザイナーで切り取るというアナログ的な手法を使っていたりします。時間も手間もかかりますが...。

ペイントにも標準で切り取りツールはあり、またgif/jpg/png保存はできますのでキャプチャして切り取って画像を製作したい場合は利用してください。

qwrwef
Connect : rf1製作時のデザインで製作したExcelファイルを最後のリンクに貼ってありますのでご参考にするなりどうぞ。
#Excel2007以降またはExcelViewer2007以降で閲覧しないと正常に表示できません。ExcelWebAppでも表示できません。

では、takimuraでした。

今回紹介したサイト
Microsoft Excel 2010 - Microsoft Office
http://office.microsoft.com/ja-jp/excel/

Microsoft Office 2010 のシステム要件 - 製品情報 - Microsoft Office
http://office.microsoft.com/ja-jp/products/HA101810407.aspx#_Toc250543111

写真編集プログラム、写真編集ソフトウェア | Adobe
http://www.adobe.com/jp/products/photoshop/family/

必要システム構成 | Adobe Photoshop CS5 Extended
http://www.adobe.com/jp/products/photoshop/photoshopextended/systemreqs/

PC・携帯 ホームページ/ブログ作成ソフト ホームページ・ビルダー15
http://www.justsystems.com/jp/products/hpb/
サンプルファイル
coron10102.xlsx - Windows Live
http://cid-29326cce448cd620.office.live.com/view.aspx/.Public/Connect%20^7%20rf1%20for%20Excel/coron10102.xlsx
#編集して利用は許可しますが、再配布することを禁止します。

Twitterにシェア


管理人takimuraのTwitterでは幅広い情報を提供しています。お気軽にフォローをどうぞ