【Photoshop中級】プリクラのように盛った写真加工テクニック

皆さんこんにちは。
今回のWEBデザイン応用編・DTPデザイン応用編の授業では、Photoshop(フォトショップ)の応用技術をマスターします。

Photoshopの応用技術を身に着けることができれば、プリクラや自撮り写真以上の、盛った写真に仕上げることができます。「今回は60分変身コース」と題し、ギャル風の盛りメイクはもちろん全身にまで、ありとあらゆる加工を行いました。

デザインの学校 ウェブデザイン応用編 プリクラのように盛った写真加工テクニック

加工前(before)と加工後(after)は同一人物です。
加工前(before)の女性はそのままで十分なくらい可愛らしいのですが、あえてプリクラのように盛った写真加工を行っみると・・・このような結果になりました。
元々あるパーツや素材をあくまでも、盛るという範囲の加工に拘り、アイコラのように別の人のパーツや素材を持ってくるような事はナシです。
そのままでも十分可愛らしい素材の良さを活かし、できるだけ自然に盛る事にしました。
いかがでしょうか?
みなさまが普段利用されている、プリクラや自撮りアプリのような仕上がりになっているでしょうか?

◎写真加工ポイント(盛ったところ)

●顔+体のライン
●くびれたウエスト
●目力のあるアイメイク(盛りメイク)
●口元の微笑み
●茶色でアーチ型の眉(アイブロー)

さすがにプリクラや自撮りアプリでは、ここまで自然に顔や体のラインまで変えてしまうとは思いませんが、ご覧のようにPhotoshopがあれば簡単です。60分間という時間制限もありましたので今回はここまで・・・きっと、時間の問題でプリクラの技術がさらに進化し、プロが60分かかる作業を一瞬であっさり完成してしまう機種が近い将来現れても不思議ではありませんね。

Photoshopをマスターして、新しい自分を発見してみませんか?
最近のあるある話ですが、プリクラや自撮り写真と実物は乖離し過ぎて、プリクラだけを見て実物を対面すると驚く事は多々ありますよね。
例えば、フェイスブックやツイッター用の写真をちょこっと加工すればもしかしてイケメンとの出会いの機会が増えちゃうかも。
身体のラインまで加工してしまうと、いざ本人と会ったときに誰だかわからずスルーされちゃう危険性もあるので、盛りすぎには注意です!

デザインの学校 ウェブデザイン応用編 バナーデザイン

皆さんこんにちは。
当デザインスクールでは、今年の夏もWEBデザイン応用編・実戦編が始まりました。

本日の授業では基礎編のおさらいと、ディテールの作り込みを学ぶため、バナーデザインを作ったので解説いたします。
こちらの DTM(デスク・トップ・ミュージック)講座ページで使用するバナーデザインをご覧ください。

◎ポイント

パソコンからもスマートフォンからも見やすい大き目の文字サイズ。

ちょっと敷居の高い音楽制作で、まず最初に悩みそうなコメントを吹き出しとして配置。

そして、画面下に向かって、レッスン=受講することで、思い通りのオリジナル曲が作れる訴求ブロックのイメージ作り。

バナーひとつでも、文言、写真、レイアウト、目線の流れ(導線)など、工夫を加え熟慮することは多々あります。

でも、そこが大事です。

ホームページもブログもネットショップも、このバナーひとつで興味を持ってもらえるかどうかが一瞬で決まってしまうほど、大きな役割を持っているからです。

DTM(デスク・トップ・ミュージック)講座ページ

※縮小して表示しています。実寸と完成品は当デザインスクールの公式ホームページ「音楽制作(DTM)攻略セミナー ~上級者向き~」をご覧ください。

◎ドロップシャドーと光彩

文字を見やすく強調するためのドロップシャドーと光彩について説明したいと思います。

下記の画像の「DTM、作詞・作曲にチャレンジしたい!」の文字を、「ドロップシャドーは、幅2px、ぼかし0px、不透明度100%」「光彩は、幅1px、ぼかし2px、不透明度100%」の効果を重ねることでより見やすくすることができました。

デザインの学校 ウェブデザイン応用編 ムービー編集制作例

皆さんこんにちは。今回はムービー編集について解説いたします。
編集素材となるのが、前回ウェブデザイン応用編の記事でも紹介した、山梨県甲府市国玉町にある「長泉寺」の晋山結制の動画です。

Youtubeにアップロードできるサイズで、この動画のダイジェスト版を制作します。
今回はMac、Windowsそれぞれの動画編集方法をご紹介いたします。

◎Macでの動画編集
Macで動画制作をする場合、「iMovie」を使うのが一番簡単な方法です。このソフトは無料で、しかも最初からインストールされているので、気兼ねなく使うことができます。
ですが、無料版ではいくつかの機能がオミットされてしまっているため、使いづらい所も。

本格的に使うのであればApple Storeで1,300円の正規版を購入しましょう。一般的な動画編集ソフトの相場が6,000円~10,000円であることを見れば、非常にリーズナブルです。

Apple-iMovie



◎Windowsでの動画編集

Windowsの場合は「Windowsムービーメーカー」を使用します。こちらも最初からWindowsのOSにインストールされているソフトで、既存の動画編集ソフトにも引けをとらない高性能なものです。

Windows7のムービーメーカーはリボンインターフェイスを採用しています。
タイムラインに素材となる動画や静止画をいれます。
放り込んだ後は、ドラッグ&ドロップで順番入れ替え可能です。
タイムラン内でカーソルをドラッグすると、動画のシークが可能。シーク速度も軽く、作業がしやすくなっています。

HDビデオなどの場合は、一時ファイルの作成にかなりの時間が掛かかります。
2時間の1440x1080サイズのh264動画の場合、おおよそ50~60分待つ必要があります。

不要な部分は「編集タブ」を開いて、カット&トリム。
フェードイン・フェードアウト、動画の再生速度調整などもこのタブで行います。

「視覚効果」タブで動画にエフェクトを追加できます。
各ボタンにマウスを乗せると、効果を適用した動画が再生されるので確認がしやすくなっています。
モザイク、回転、カラー調整等、26種類の効果の中から、様々な効果を使用できます。

「アニメーション」タブには、シーンチェンジで用いるエフェクトが約60種登録されています。
複数の動画を自然につなぎ合わせる際に利用します。

最後は「ホーム」に戻って保存を押すと保存ができます。

WindowsLiveのIDを取得・ログインしていれば、そのままYouTubeやSkyDrive、FaceBookなどにアップロードも可能です。

高い動画編集ソフトを使わなくても内臓されているムービーメーカーで簡単に動画編集ができてしまします。編集してすぐに共有することが出来るので、是非お試しください!

デザインの学校 ウェブデザイン応用編 ECサイトについて

皆さんこんにちは。本日は通販サイト―――ECサイトの制作について解説していきます。

ECサイトとは、自分の商品やサービスをネット上にある独自運営のウェブサイトで販売するサイトのことを指します。一般的にネットショップと呼ばれているものです。
昨今は企業はもちろん主婦の方まで、ECサイトを運営している人は幅広く、これからもっと伸びる市場だと期待が集まります。

ジュエリーと言えば、やはり女性が身につけるもの。このサイトでは主に若い女性をターゲットにしているので、サイトのメインカラーをピンクに設定。特徴的なロゴと「格安ジュエリー通販は宝石の町、甲府から!」という文句を大きく入れ、一目でここがどんなサイトかわかるように制作しましょう。ECサイトで使う文句は主に格安、高品質などがベター。そこに甲府という場所やエンゲージリングなど扱っている商品の中でも自慢の商品を据えて、このサイトだけの売り文句を作りましょう。

ウェブデザインスタジオ ECサイト バナー

上図には会員のログイン、会員のMYページ、新規会員登録、カゴの中身を見るという項目が並んでいます。少し画面をスクロールして左右を見ると同じ所に飛ぶ場所はありますが、一番目に行くサイト上部に項目を用意することでよりスムーズに顧客がサイト内を行き来できます。

ウェブデザインスタジオ ECサイト 広告 ブログ

中央にあるのは広告とブログです。
広告は大きく表示することでより顧客の目を引くことができます。サイトを見る人の目の動きは、最初に最上部のバナーを見て、興味を持ったら下にスクロールし、そこで広告を目にします。ここで顧客が求めている、興味を持つような広告を表示することで顧客を商品ページに誘導する(広告には必ずその商品へのリンクを貼りましょう)ことができるのです。サイト制作に慣れてきた人は、広告に横スクロールの機能を付けて複数の広告を表示するという工夫をしてみてもいいかもしれません。
ECサイトでのブログは、実は意外と注目される要素です。通常の店と違い、ECサイトは今営業しているのか、ここはちゃんとした店なのか、判断が難しいものです。せっかく気に入った品物があっても、届くまでに時間がかかったり、不良品が送られてきて損をした、という話は後を絶ちません。そうしたECサイトの判断基準として、ブログの更新があげられます。ブログがきちんと定期的に更新されていれば、そこはちゃんと人が管理しているという証明になるのです。また、ブログの更新はサイトの宣伝にも直結しますので、ECサイトを運営する際にはブログもセットで制作しましょう。

ウェブデザインスタジオ ECサイト カゴ

左には買い物カゴと商品の一覧、お問い合わせなどの各種情報を掲載。

ウェブデザインスタジオ ECサイト ログイン 検索

右には会員のログインフォーム、検索フォーム、営業カレンダーを載せています。
どれもサイトに合わせ、そして誰が見てもわかりやすいデザインを心がけたものです。前回、前々回のアイコンやバナー制作の内容などを駆使しましょう。

◎サイト
こうしたECサイトを提供しているサービスは数多くあります。
ここでは上からオススメ順にサイトをご紹介。

・楽天市場 出店・開業―ネットショップ出店をサポート!資料請求も無料!―

・Yahoo!ショッピング – ネットで通販、オンラインショッピング

ネットショップでの開業、開店から販売、成功まで『ショップサーブ』

・日本発!ECオープンプラットフォーム EC-CUBE

◎アップロード
今までサイト情報のアップロードに使用するFTPサーバはFFFTPを使うのが一般的でしたが、最近は高性能なFileZillaが主流になりつつあります。

・FileZilla – The free FTP solution

・FileZilla プロジェクト日本語トップページ -SourceForge.JP

元は英語サイトですが、有志の方で日本語化が進んでいますので問題なく使用できます。
FTPだけでなくSFTPやFTPSにも対応。ファイルの転送速度は比較的速く、待たされることや途中で止まることはありません。また右クリックからファイルを開いたり、編集したり、アップロードすることが可能ですので、スムーズな作業が可能となります。
もちろん無料で利用できますので、是非導入してみてください。

ECサイトにはウェブサイトを構築する上で必要な要素が多数そろっています。
参考などにするだけではなく、是非一度どんなものなのか触れてみてはいかがでしょうか。

デザインの学校 ウェブデザイン応用編 アイコン制作について

皆さんこんにちは 今回のWEB応用ではホームページやブログで使用されているアイコンの制作について解説していきます。

ページ間の移動や記事のアクセントなどで使用されているアイコンは、前回説明したバナーとは違い、大きいものから小さいものまで様々な形のものがあります。そこで今回は、代表的なアイコンの例を取り上げて説明していきましょう。

◎図形

 ウェブデザインスタジオ アイコン 吹き出し

円と三角形を組み合わせることで作ることができる吹き出しのアイコン。ですが、ただ重ねただけは粗が目立ちます

 ウェブデザインスタジオ アイコン 吹き出しウェブデザインスタジオ アイコン 吹き出し

こうした図形を重ねる物を制作する時はパス結合を忘れずにおこないましょう。統合すれば重ねた図形が1つの図形になるのできれいなグラデーションを入れることができます。

小さいサイズのアイコンを作る際には、図形のエッジを立たせるなどの工夫が必要になります。小さくなるほど表現するドットの数が少なくなり粗さが目立ちますが、こうした処理をすることでしっかり見えるアイコンを作ることができるのです。

 ウェブデザインスタジオ アイコン 角丸  ウェブデザインスタジオ アイコン 角丸

また角の丸い図形を作る際には角丸ツールを使うのではなく、四角形ツールのプロパティにある角丸の半径の数値を操作して制作しましょう。数値を変えることで、自由な角丸を作ることができるためです。

ウェブデザインスタジオ アイコン 矢印

矢印を制作する際には先端が尖るよう、手を加える場合があります。特に小さい矢印を作る時には先端部分が1ドットになるようドット数を奇数で作りましょう。極小の物を作る時はエッジがぼける効果は外して作ります。ドットの数が多くないのであれば、鉛筆ツールで1ドットずつ作る方が確実です。

◎効果
ドロップシャドウなどを入れる時は、ぱっと見た目に効果がかかっているかいないか判別できないくらいの微妙なラインでまず入れましょう。2/20/2/-(変更せず)が大体そのラインにあたる数値です。そこから徐々に効果を上げていきましょう。

ウェブデザインスタジオ アイコン

ウェブデザインスタジオ アイコン 文字

右が通常、左がドロップシャドウの効果を加えたアイコンです。

また、プロパティにある効果に頼らずに、こういった効果を得ることもできます。

ウェブデザインスタジオ アイコン 丸

図形の上に黒で塗りつぶした別の図形を置き、上に置いた図形に透明処理を施すと上図のような効果が出ます。下地になっている図形にバックアップを取ったら、2つの図形を選択してパス統合の項目から切り抜きを選択し色が変化している部分だけを抽出します。後はバックアップを取っておいた図形を組み合わせて完成です。

これらを含めデザインに欠かせない効果ですが、制作するアイコンが小さいのであれば気を付けて使いましょう。ドット数などの関係でそこまで大きな変化が起きないからです。むしろ悪いデザインになってしまうので、使わないことも考えましょう。

◎文字

ウェブデザインスタジオ アイコン 文字

フォントの太さはDFP系統であればW5が標準です。サイズはアルファベットであれば10、日本語であれば12までが妥当なサイズとされています。また前回のバナー制作でも触れた内容は、アイコン制作でも大いに役立つので是非使ってみて下さい。

アイコンなどのブログパーツはよく無料配布されているので、参考に探してみると良いでしょう。皆さんも、是非自分だけのアイコンを作ってみてください。

デザインの学校 ウェブデザイン応用編 バナー制作のコツ

皆さんこんにちは 今回のWEB応用ではバナーの制作のコツについて解説していきます。

バナーはウェブ上での広告、宣伝に使われる重要なアイコンです。そのため何よりも目立たせ、サイトにやってきた訪問者の目に留まるようデザインするのが必要となります。

制作する前に少しバナーのサイズについてふれておきましょう。
普段様々なバナーを目にすると思いますが、これらのバナーはある程度サイズが決まっています。
その中から、下に代表的なサイズをあげてみました。
用途やレイアウトに応じてどんなサイズが良いのかまず考えることが大事ですね。

では、先日の授業で制作されたバナーをご覧ください。

完成図

写真、図形、文字を様々な配色で配置してありますね。1つ1つ解説していきましょう。

◎写真
ここでの写真はドロップシャドウで効果を付けてあります。ここでの設定値は数値順に7/20/7/ー(変更せず)です。これにより写真により立体感を持たせる事が出来ます。 写真はバナーに限らず、人の目に留まりやすいものです。拡大して他の図形や文字とは区別をつける、左側など文字を読み始める所に配置するなど、人の視線を意識した配置を考えましょう。

◎図形
四角や円、三角などの基本形以外の図形も積極的に使用しましょう。線ツールで描いた太線から作れるマーカー線、星形ツールから作る事の出来るイガグリ型の図形などはその一例です。
バナー内容に沿った図形を使うよう心がけましょう。スキルアップ、能力向上といった内容であれば上向きの矢印を使うといった具合です。これらを文字と組み合わせる事で、このバナーが何を宣伝しているのか、その内容を?みやすくなります。
またここで使われているTwitterやFacebookのアイコンは、無料で使える素材として公開されているものです。有名なのは海外サイトのiconspediaなどです。

◎文字
広告の中でも特に強調したい文章は、テキストツールで1文をそのまま入力するのではなく文字にリズム感をつけて、目立たせていきましょう。
まず、「ソーシャル時代」と「攻略セミナー」の部分は変形を使い、文字を斜めにしてみましょう。少し角度がつくことで、右上がりに上昇するような印象がつきました。
「!」などの記号も単体で入力する事で、より文章に馴染みやすいよう加工する事が出来、これにより文字の表現の幅が大きく広がります。
また一つ一つの文字の大きさを変えることでリズム感をつけています。
次に「SNS」の部分です。それぞれ文字をうって、今度が右下がりに配置しました。
英語や数字は英語圏のフォントであるArial、Arial Blackなどがより綺麗に表現できます。
全体的に全て右上がりではなく緩急のついた目立つものになりましたね。

◎配色
使用する色はできるだけ統一させましょう。あまりにも別系統の色を混ぜ込んでしまうと、あまり目にしたくないデザインになってしまいます。色相環の補色の関係を意識し、目立ちながらも目に優しいそんな配色を作っていきましょう。 どうしても配色で悩む、という方は専門書やネット上にある配色見本を参考にすると良いでしょう。また日頃から様々な所にある広告や景色を見ては、その配色をインプットしてデザインに活かせるようにしておきましょう。

バナーはどれだけ人の目を引く事が出来、内容を読んでもらうかが重要です。 皆さんも様々な工夫を凝らして、より人目を集める広告作りを目指してください。

デザインの学校 ウェブデザイン応用編 使えるツール

今回はデザイナー必須!
無料で使えるオンラインストレージ、デザイン・イラスト素材サイト をご紹介いたします。
それぞれ「ホームページ執事」のほうで詳しく紹介しているのでご覧ください。



●オンラインストレージ記事まとめ

無料で使えるオンライン ストレージ Windows Live SkyDrive

宅ふぃある便&Evernote 

便利なwed無料ツール詰め合わせ~1回目~ 

無料で使えるオンライン ストレージ firestorage(ファイアストレージ) 

●デザイン・イラスト素材記事まとめ

【まとめ】無料のデザイン・イラスト素材サイト 

更新したはずのページが更新されない時 [Ctrl]+[F5] 

デザイナーなら知っておきたい デザイン黄金比 

デザイナーなら知っておきたい 無料アイコンダウンロードサイト 

デザイナーなら知っておきたい 無料で使えるカラーツール 

これらのツールや素材を使いこなして“デキる”デザイナーを目指しましょう!

デザインの学校 ウェブデザイン応用編 最終回

 皆さんこんにちは。ついにWEBデザイン応用編の最後の授業となりました。

まずは各自担当したページのブラッシュアップから始まりました。
コンテンツ企画やデザイン面は校了となっているため、主にコーディングの修正を行います。その際に、写真に上に文字を配置する時に見やすくする方法(判読性の向上)についても教えていただきました!

背景の写真は煩雑で煩いくらいの悪条件がよいので、森林写真を選択し、その上にただ文字を配置するパターン

見本

とてもわかりにくいですね。
これを写真の色を薄くし(または明るくし)、その上に文字を配置することにより・・

見本

このように見やすくなります。
他にも写真で主に使用されている緑色を拾って短形の作成し、乗算にして緑色のフィルターを重ねたようにすることにより・・・

見本

このようになります。
一般的に、「袋文字」にすると見えやすくなるので、大手出版社の雑誌タイトルなどを見るとほとんど袋文字なんです。でも今回はグロー(光彩)とドロップシャドウ(影)でさりげなく、かつ文字の際立たたせる

見本

さりげなく効いているのがわかりますでしょうか?
これをすることにより、細い文字も栄えるようになるんです^^

さて、ブラッシュアップも各自終了し、約2ヶ月間に及んだこの応用編も終わりに近づいてまいりました・・・
皆で協力して頑張った作品である、マウントピア黒平のサイトが完成いたいしました!

マウントピア黒平
http://kurobera.blog0.jp/

黒平トップ

いかがでしょうか?
皆の良いところをあつめた集大成のデザインとなりました。

色々と四苦八苦した点もありますが、無事完成でき、生徒も先生もほっと一安心

そして応用編の打ち上げといたしまして、山梨IT飲み会に参加させていただきました!

IT飲み会

IT業界の方が大勢集まり開催されるこの飲み会。
飲みながら売り上げをあげる!飲みながら情報交換をする!といった娯楽とビジネスを
掛け合わせたような飲み会でした。

途中、主催主であるSPC様よりプレゼンテーションがありました。

IT先進国であるアメリカへ出張し最新キーワードを入手
その名は「パンダアップデート
これは簡単に説明すると「質の悪いサイトを撲滅する」です。

これにより、質の悪いサイトはガクっとGoogleの順位を下げてしまうという恐ろしいもの。
日本ではまだ知名度はないですが、今のうちから対策をしておいて損はないそうです。

また、Googleの検索機能は本当にすぐれており、どんなサイトが悪いサイトかというのを判断できるようです!

中でも特に驚いたのが「戻るボタンの回数を感知している」です。
この戻るボタンを多く押されるサイトは悪いと判断され、順位がどんどん落ちていってしまいます。
なお、サイトの中に「戻る」といったボタンを作成し、それを押す分には問題がないようです。

今後ソーシャルメディアは必ず抑えるべきともおっしゃっていました。
TwitterやFacebookのほかに「Google+」というものもあり、これはGoogle版のSNSのようです。

非常に熱意にあふれ、知識を深めることが出来たプレゼンでした。

飲み会では色んな方とお話をし、良い刺激になりました。
この調子で9月からはWEBデザイン実戦編でも皆で一生懸命頑張ります。
皆さん本当にお疲れ様でした。

デザインの学校 ウェブデザイン応用編 第7回

 こんにちは。7回目の応用編ブログです。

今回はマウントピア黒平テストサーバーにアップした各コーディングの修正から入りました。

画像をクリックして拡大表示をする場所があるのですがそれを「Ajax」といい、これを活用すると画像拡大がプロっぽくできるようです。

普通、拡大するとただ拡大表示が出て、戻るボタンか、ブラウザを閉じるで終了しますよね?それでは素人が作成したページのようになってしまうので、Ajaxを使用することにより、その場に画像を拡大したページが現れ、もう一度クリックすると消えるようになります。

また、画像をアップロードする時は基本WEBの世界は電子化された世界なので1byteでタイトルをつるのがルールのようです。

さて、コーディングをするにあたり一番大事なのが「バックアップをとる」ということです。
もし失敗したとしてもバックアップがあればいつでも修正できるので安心ですね

今回、Fireworksを使ってナチュラルな見出しの素材を作成するコツを教えていただきました。

まず短形ツールを使い、好きな形にします。そして外側を濃い緑(テクスチャ:しわくちゃ 65%内側を薄い緑テクスチャ:砂壁 65%)、にするだけでナチュラルな素材の完成。

大見出し

こちらが完成した素材です。

他にも簡単なイラストを使った素材の方法も教えていただきました!まず茶色い一本の線を描き、(テクスチャ:しわくちゃ 65%)ブラシツールを使い4枚の葉っぱを描きます。続いてクローバーの茎の部分を描きます。
この時にあえて雑にするのがポイントのようです!

あとはその葉っぱと茎を合体させ、縮小させることにより簡単に手書き風のクローバーが描けるという訳です!

中見出し

簡単なのに可愛いですよね

あとは一番最初のものを応用することにより

拡大

このようなボタンも簡単に作成することが可能なので、皆さんもチャレンジしてみてくださいね

さて、応用編も次回がラストとなりました。
次回では完成したマウントピア黒平のサイトを皆さんにご報告できると思いますので乞うご期待。

話は変わりまして、今日は皆様に無料の動画サイトを紹介します。今後サイトを作成し、運営していく上で、自分で作成した動画をアップしたいことが思う日も来るでしょう。そんなときに約に立つのがこの「動画サイト」なのです!

オススメ無料動画

名前 アップロード
制限
アップロード可能な
ファイル形式
特徴
youtube 2GB以下動画の長さは
15分以下
※要無料
会員登録
WMV
3GP(携帯電話)
WMV(Windows)
MOV(Mac)
MP4(iPod/PSP)
MPEG
FLV(Adobe Flash)
MKV(h.264)
動画サイトでは一番有名だと思われるYouTube。動画数、人気ともに絶大。メディアプレーヤーを立ち上げなくても再生ができる、ファイルサイズが小さいといった理由もあるが、ADSL環境であれば即再生できるといったメリット
がある。ただし、画質が悪く、アップロードした後にすぐアップされないことがある。
Veoh 無制限
※要無料
会員登録
AVI
MPEG4(DivX、Xvid)
など
高画質、高音質、動画数、と全てが揃っている動画共有サイト。ただし英語のみの対応となっている。
Pandora.
TV
無制限 FLV形式のみ 韓国発の動画投稿・共有サイト「Pandora.TV」の日本語版。キーワード検索や、人気動画一覧から気になる一本を選び、タップすれば直ぐに動画を楽しむことができる動画の高速アップロード、安定した動画視聴を楽しむためのプレミアム会員、それに加えて動画のダウンロード機能が付いたU-プレミアム会員(どちらも月額課金制)が存在する。
Megaup
load
無料会員
:2GB
有料会員
:無制限
特に記載なし 非会員、無料会員、有料会員にそれぞれ違いがあり、一度にダウンロードできるファイルの数は、非会員、無料会員は1ファイルのみ。プレミアム会員になると無制限。また、ファイルのサイズが 1024MBを超えていると、プレミアム会員以外はダウンロードできない。さらに、ダウンロード開始までの時間にも違いがあり、プレミアム会員は即ダウン ロードできるが、無料会員は25秒、非会員は45秒待つ必要がある。
eyevio 150MB mp4
m4v
mpg
flv
3gp
3g2
wmv
avi
movQuickTime
VOB
RealPlayer
DVDほどではないが、今までの動画共有サイトの常識を覆す高画質。また、アップロードが完了して3~5分ほどでエンコードが完了すると、ストレスを感じさせない。ただし容量が少ないのが難点
Ameba
Vision
無制限 MPEG-4MPEG-1
MOV
AVI
WMV
VOB
FLV
3GP
3G2
AMC
サイバーエージェントが運営する動画配信サイト。。携帯の動画をメールでアップロードできたり、PCからでも動画のアップロードの方法が容易。また、アメーバブログをやっている方な動画投稿が簡単にできる。
Daily
motion
2GB動画の
長さの
限度は60分
MP4
MOV
WMVAVI
など
様々な国の動画が見られるのが特徴。動画ごとにどこの国からアップロードしたかがわかる。日本語以外の言語にも対応している。
同じ興味を持つ人同士が情報交換しやすいグループという機能がある。
ニコニコ
動画
無料会員
:FLV,MP4
:40MB
その他の形式
:100MB
有料会員
:全形式100MB
FLV
MP4
DivX
XviDMPEG1
MPEG2
WMV
など
日本ではYou Tubeに次ぐ知名度・アクセス数を誇る動画配信サイト。最大の特徴は動画の上にテキストで「コメント」を投稿できることである。日別・週別・月別でコメント数・視聴数・お気に入りにあたるマイリスト数でランキングが表示されるため、ランキングの上位を狙って面白おかしい動画が投稿される場合が多く、編集された動画の割合が高い。
ワッチミー!
TV
500MB
※要無料
会員登録
AVI
DV
Motion-JPG
MPEG-4
3GP
3GPP
WMV
MOV
H264
MP4
FLV(SorensonSpark圧縮のみ)
フジテレビ系の動画共有サイト。サービス内容はyoutubeに似ているが、著作権法違反になるコンテンツや不適切なコンテンツは配信されない。
Flip
Clip
無料会員
:100MB
有料会員
:毎週1GB
Flashビデオのみ 「ムービーデコレーション機能」という動画に直接絵が描けたり、効果音をつけたりすることができるが用意されている。動画はFLASHに変換されてから再生される仕組みになっていて、再生まで少し待たなくてはいけない。

一般的に知名度が高いのはやはりyoutubeです。
 未登録でも動画が見れ、他のサイトへの連動もボタン一つでできてしまいます。
ブログやmixiなどのウェブサイトに挿入し、公開することができます。再生時間が短いのが難点ですが、それでもかまわない方には使い勝手が良いと言えます。

また、youtubeは再生後に関連動画が出てきてしまうのですが、それも動画を再生する際に、YouTubeの画面で埋め込みタグが表示されている枠の右の歯車のアイコンをクリックすると、下に画面が表示されるのですが、「関連する動画を含む」のチェックを外してから埋め込みタグをコピーすると、再生後に関連動画は表示されなくなるので安心です。

次点でオススメなのがeyevioです。ボタン一つでHDに切り替えができ、アップロードの際に上げた容量とパーセンテージがしっかり出ます。また動画が終了した際に関連動画が出ないのも魅力の一つです。
皆さん、自分にぴったりの動画サイト発見の参考にしてくださいね。

デザインの学校 ウェブデザイン応用編 第6回

 皆さんこんにちは。8月に入り、一回目の応用編です。
今回はクライアントの甲府市様がお越しになり、意見交換から始まりました。

まず今まで私たちが作成したメインビジュアルを拝見され、黒平の特徴をよくとらえており、鳥をモチーフとしているロゴが大変お気に召したようでひとまず安心
その後、クライアント様の要望意見として

  • ポップな雰囲気が欲しい
  • フォントはやわらかく、丸ゴジック希望
  • ロゴもポップな感じに
  • シンプルにしたい
  • 硬すぎず、砕けすぎない感じにしたい

といったご意見がありました。
クライアントの方は「家族連れと若い女性も来られるようなサイト」をご希望のようです。
そこで打合せの大変さを理解したのですが、我々は一番始めにターゲットユーザー
年齢層をある程度設定してから作業に取り掛かりました。

なので、クライアントの方の意見とは別になってしまい、時間的にも今から修正するのは難しい・・・

これがデザイナーとクライアントの打合せの難しさだそうでして、ただ、クライアントの要望にYESばかりだと本当に良いサイトは完成しなく、クライアントの方には今までの考えのをはずしてもらい、
その段階で譲れない軸をぶれないようにし、サイトを完成させるのがプロの技だそうです。

そこで再度相互に話合い

  • イラスト→全体のバランスで判断(鳥種の拘りはない)
  • POP=若年層→ 家族全員をターゲット、役所らしくない、
    年配層から子供連れ若い家族層
  • 色→ハイシーズンの緑・青
  • フォント→ナール(丸文字)
  • メインビジュアル→自然・施設・子供
  • キャッチコピー→黒富士

と決めました。

その後、私たちが作成した、アクセスマップ・施設マップ・登山マップをクライアントの方に見ていただき、修正箇所を伝えていただき、クライアントの方との打合せは終了。

その後、各自修正箇所を修正し、今後運営していくページに各自が作成したものをアップし、その日は終わりました。
来週の宿題はメインビジュアル作成なんですが、今まで作成したものの中で一番良いものを各自で若干修正するといった内容です。

応用編が残り2回となって焦りも出てきましたが、無事完成を目指して皆で頑張ろうと思います

話は変わりまして、とても便利なサイトを2点紹介いたします。

まず一つ目は「宅ふぁいる便」です。
http://www.filesend.to/
これは一回目でご紹介したオンラインストレージの一つです。
有名なのでご存知の方も多いのでは?

これはオンラインストレージの中でもとても使い方が簡単です。
ファイルを送信する方は要会員登録なのですが、受け取る方は会員登録なしでOK

こちらが、送りたいファイルを添付し、受け取って欲しい相手のメールアドレスを入力するだけで自然にその相手にファイルが届けられます。あとは相手がファイルをダウンロードすれば終了。
その名の通り「宅配便」と同じ役割ですね。
ただ、送信可能な容量が無料会員の場合は50MBと制限があったり、(無料で登録できるプレミアム会員の場合は最大100MBまで)ファイルの保管期間72時間と少ないのが難点です
ちなみに有料会員1GBまでOKです^^

二つ目は「Evernote(エバーノート)」です。
http://www.evernote.com/about/intl/jp/

これは知らない方も多いのではないでしょうか?

簡単に説明すると「WEB上に置いておけるノート」ですね。
これは、テキスト情報、画像、Webページ、PDF、音声ファイルなど全てのファイルを一つの場所に入れて一元管理する事が出来るサービスです。
ノート」と言われる(例えるなら「メモ帳」)場所に、画像やファイルを添付するだけでOK。ノートに付箋や写真を貼るといった形で「ノートの中に保管」する仕組みになっています。

情報は、タグをつけることにより整理でき、それらのファイルを、PC、携帯、Webで共有できるため活用したいときにすぐに活用する事ができるという優れもの!
なお、トップページよりログインする方法もあるのですが、ダウンロードし、活用したほうが使い勝手が良いのでオススメです。(添付がドラッグ&ドロップで簡単にできます!)

また、iPhoneAndriod携帯Blackberryと相性がよく、
http://www.evernote.com/about/intl/jp/download/
こちらよりご自分の携帯に該当するものをダウンロードして使うと、ボタン一つで画像を添付できたり、音声を添付できたりします。

気になる容量ですが、無料会員1か月40MBとファイルの保存容量を制限してます。
有料会員になると月500MBまで、アップロード容量が増えてます。
でも保存容量無制限なので十分利便性があります。

個人でも使い勝手が良いですが、共有の使い方の事例として、例えば互いに共有したいことがあり、いちいちメールで送ったり、メモで書き残すのは面倒。

お互いに共通のアドレスとパスを知っていれば、Aさんが何か記事を書く。
それをBさんが見て共有する、そしてBさんがその記事をまた修正し、保存する。
Aさんがそれを見る・・・・といった感じです。

とても便利な機能なので使って見て下さいね
きっとこれくらい使えるのが常識な世界がきっと来ますよ!

デザインの学校 ウェブデザイン応用編 第5回

皆様こんにちは。
7月最後の授業となった今回。

まず前回宿題だったアクセスマップ・施設案内図・登山コースガイド の披露・評価から入りました

個々の作品は私の目からするとどれも完成度が高く、良い作品だと思うのですが、やはり先生の目は違うようで、各自指摘が入りました。

  • 何が一番大切なのか目立たせる
  • フォントの統一
  • 文字の大きさ
  • 道中の線の強調
  • 主役とサブの扱い

などなど・・・

ちなみに地図は考える力を問われるそうです。
地図によりデザイナーのレベルがわかるそうです。

先生が持ってきてくださった沢山の資料があったのですが、それを見ても地図ごとに
個性があり、小さく、簡易的でも見やすいものや、情報量が多くてもわかり易いもの。
その中でも、観光雑誌で有名なまっぷるが出している「東京遊ビ地図」という雑誌の
地図が分かりやすくて参考になりました。

http://www.mapple.co.jp/
(東京遊ビ地図の他にも色々な観光雑誌各種あるようです)

資料集めはとても大切なことだと改めて実感いたしました

また、地図をシンプルにするメリットは自分が好きにアレンジできるという点にあるようです。
(詳しくはグーグルマップ等で補足すればOK)

ちなみにグーグルマップをサイトで表示させる方法は

リンク

グーグルマップを表示させたときに、右上にある所をクリック。
するとURLが出てきますので、それをサイトに貼るだけで簡単にマップを入れられます!

今回、上記の観光雑誌のほかに、サイトからも地図をリサーチしたのですが、
リサーチしたサイトをブックマークしたのですが、ブックマークは知らない間に
どんどん追加されていき、何を調べたか?が分からなくなることがありますよね?なので
ブックマークは意図的に整理」することが大切です

例えば「何の情報か(サイト名)」とすると
「地図(ウェブデザインスタジオ)」
こう記述することにより、地図の情報で、それはウェブデザインスタジオのものだと一目両全ですね。

ここで一つ豆知識を・・・Internet Explorerで簡単にお気に入りを整理する方法があります。
まず、Internet Explorer の [お気に入り] メニューから、[Shift] キーを押しながら [お気に入りの整理] をクリックします。するとエクスプローラが開き、ファイルを移動するのと同じ感覚でお気に入りが整理できるというとても便利な豆知識です

また、今回とても便利なファイル形式を教わりました。
それは「リッチテキスト」です。

リッチテキストの形式で記述された文章は、単に文字情報であるだけでなく、文字そのものがひとつの表現となりうるもので、文書内に図形や表を埋め込むことも可能です。
このファイル形式で文章を作成すれば相手がWordを持っておらず、自分がWordで作成してしまった場合でも安心。
これで保存することにより、相手のパソコンでもWord文章をメモ帳などで開いてくれるといった優れものです

Wordといえば、なかなか高額なので手に入らない・・・という方もいらっしゃると思います。
そこで画期的なのがOpenOfficeです
これはMicrosoft officeとほぼ同じ機能が無料でダウンロードできるというものです

もし新しいパソコンは買ったけど、Microsoft Officeが入っていなかった・・という方にオススメです

次回はついにお客様(クライアントの甲府市様)と実際お会いして、打ち合わせの中でどういったサイトにするかを決めます。
今からとても緊張します・・・が、皆で頑張ります!

デザインの学校 ウェブデザイン応用編 第4回

皆さんこんにちは。第4回目になりました。

まず先週の宿題だったデザイン提案用の「メインビジュアル」の披露・評価から入りました。

今回は、実際にお客様(クライアントの甲府市様)が見てくださったみたいで、様々なアイディアの作品に喜ばれていたそうです。(デザイン案はホームページリニューアル時に発表しますね)
そういったいただけるとこちらも嬉しくなってしまいますね。

メインビジュアルはサイトの看板なので、作成するのに非常に苦戦しました。
自分は良いと感じても、周りの反応がイマイチだったり、その逆もあったり・・・。

メインビジュアルを考える際に様々なコツを教えて下さいました

  • タイトルとキャッチコピーの文字の色は同系色を使う
  • 文字に付けるグローやドロップシャドウはさりげなく
  • キャッチコピーとロゴタイプのフォントは別に
  • ロゴタイプは小さく、キャッチコピーは大きく
  • 実際に大きさを気にしてロゴ等を作成する(縮小しても見やすいように)
  • 画像を入れる際には切っては駄目な場所がある(例えば人を入れる場合、顔からデコルテまでは入れる。)
  • 背景と文字の関連性(あまりかけ離れているのはナンセンス)
  • 写真を多くしようするのは客受けが良い
  • などなど・・・

    さて、マウントピア黒平のサイトは、WordPress(ワードプレス)で制作する、ブログ形式のホームページ。ブログベースなので、日記感覚で記事を投稿できるというすぐれもの

    さらに、HTMLを入力すればアレンジも出来、オリジナル度の高い立派なホームページにもなるんです。今からメインビジュアルや、サブページを作成するわけですが・・・楽しみもあり、不安もありです

    話は授業に戻りまして、今回の授業もFireworksを使用。
    先生が用意した画像を真似して作成するといったものでした。

ケーキ1

    一つ目の作品はこれです。
    一概に「真似」といっても難しく、どうやってあのグローをしているんだろう?や、
    あのフォントは何だろうか・・・?などと目だけでの判断はとても難しかったです。

    この画像のテキストの下の部分ですが、グローがかかっているのがお分かりですか?
    一見灰色かと思いきや若干赤みのかかったグローとなっています。
     グローには三種類あり、「無彩色」、「暖色のグレー」「寒色のグレー」とあります。
    食べ物を扱う場合は「暖色のグレー」が適しているでそうです。

    また、画像の「切り取り」機能も今回使いました。

ケーキ2

    その際に使用したお手本画像がこれです。

    まずケーキの全体画像が用意され、それを各自で切り取るといった作業に入りました。
    先生オススメの切り取りは、まずFireworksのペンツールを使い、切り取りたい画像の
    やや内側でパスをとります。(その際に、パスの色はその画像にない色を使うのがコツだそうです)

    その後、パスは白しか反応しないので、パスの中を白に塗り、パスのレイヤーと、切り取った画像のレイヤーをクリックし、「修正→マスク→マスクとしてグループ化」で切り取り完了。
    なお、ゆったりめの方がなめらかに切り取れるそうです。それをコピーして後ろに貼り付けていきます。

    ここでポイントがひとつあり、後ろのケーキが若干ぼけていますよね?これはぼかし(ガウス)を使用することによりこういったぼや~っとした画像に加工できるのです。

    さて、今回名言が誕生しましたそれは

    Fireworksはパスを制すれば Fireworks を制する!です
    漫画で言えばこれは見開き2ページで言われるようなセリフですね

    アプリケーションごとに制するものが違うそうですが、それらを制すれば仕事が速くなるそうです。
    プロっぽいアイコンの作成方法も教わりました。(応用編では普通に作っちゃダメみたい)

作成手順として、まず星のオブジェクトを作成し、頂点を24にします。その後、青でグラデーションをかけ、このイガイガは完成。
その後、丸い放射線状のグラデーションのかかった白いオブジェクトを作成し、5~15%の透明にして重ねます。これでハイライト効果を演出!

さらに、イガイガの形に合わせてマスクすると、上記のようにちょっと格好良いアイコンが出来ます。
そして PNG-32 形式のファイルに保存

1 「書き出しのプレビュー
2 形式を「 PNG 」に変更。
3 透明化の設定を「透明」に変更
4 書き出し。

ちなみにPNGは、PNG-8、PNG-24、PNG-323種類あります。
PNG-24とPNG-32はフルカラーに対応しており、なおかつ32ですとアルファチャンネル使用可能で、透明度を指定した透過画像を作成することができます。
(ちなみにアルファチャンネルとはコンピューターが扱うデジタル画像データにおいて、各点に設定された透過度情報を保存するデータ領域です。ブラウザによっては未対応のものあるので使用する時は要確認)

PNG で保存することにより、手元にある写真などへコピー&ペーストしてもシャドウが綺麗に反映され、オリジナルデータと同じように使いまわせます

ちなみに透過 GIF (背景が透明なGIF)でも透明になるのですが、上記のような複雑な形の場合、
どうしても背景の色が写ってしまい、完璧ではなくなってしまいます。
もし透過 GIF で書き出したい場合は・・

このように数十年前にあるような、角がはっきりしているシンプルな形のアイコンしか出来なくなってしまいます

さて、今回の宿題は
アクセスマップ・施設案内図・登山コースガイドを作成するというものでして、これは以前授業で出てきた「ロジック」が鍵を握ります。
デザインはアプリの操作やデザインの良し悪しの問題ではなく、情報デザインやユニバーサルデザインの観点や配慮が求められます。
自分や関係者だけが分かるガイドマップを作っても意味がないですよね・・
土地感のない首都圏などの観光客にとっても分かりやすいガイドマップ作りという「考える力」を鍛える課題です。

以上を踏まえ、皆で分担し作成しようと思うのですが、今までマップを作成したいことがないのでこれは頭を使いそうです・・・

    デザインの学校 ウェブデザイン応用編 第3回

     皆さんこんにちは。
    授業も3回目になり若干ですが慣れてきました。

    今回も、宿題の相互確認より始まりました。
    皆が各々に作成したブログのメインビジュアル。

    Fireworks で作成したメインビジュアは各々の個性が光る作品ばかりでした。
    私は「やっぱりそれぞれのセンスにより作品の出来が違うのか・・」と考えていたのですが
    どうやらデザインというのは感性(センス)ではなく論理(ロジック)が大切のようです

    くロジカルシンキングという言葉を耳にしますか、実際には何だろうかと思い、グーグルで調べてみました。「成功率を高め、確実に目標達成するために不可欠な思考法」だそうです。
    先生は料理や建設でたとえ得るとわかり易いとおっしゃっていました。

    用はターゲットを絞るといったことでして、早速皆で企画会議を行いました。

    マウントピア黒平に来られるお客様の年代やその目的、県内を狙うのか県外を狙うのか・・・?

    今回決まったのは

    • ターゲットユーザー
    • 県外、登山者、家族旅行、年配夫婦、サークル活動、カルチャースクール、など

    • 年齢層
    • 20~40代

    • 利用目的
    • 上記ユーザー、リゾート、仏閣寺院訪問、写真撮影、ロッククライミング

    • 訴求点
    • 百名山の黒富士山のちかく、登山コースに囲まれている、都内からのアクセスのよさ(片道2時間)。

    • 訴求できない点、差別化できない点
    • 温泉は湯質や施設の評価がない。河川は百名水ではない。黒富士山単体の固有名詞では通用しない。山の写真だけでは普通の山に見えるので魅力が分からない。若年層や女性受けするサービスが見当たらない。またはその準備がない。

    このような結果がでました。

    それを踏まえてメインビジュアルも練り直し。
    より具体性を出し、動物や植物のイラストを入れると良いのでは?や、文章を強調すべきか、
    どんな字体や色が良いのか・・・

    また、今回の宿題でロゴも作成したのですが、イマイチ何を伝えたいのかが分からないと指摘を受け、具体性の大切さを学びました。

    今回の宿題もメインビジュアル作成なのですが、前回学んだことを活かし、良い作品に仕上げたいと思います

    さて、今日も便利な機能を紹介します。
    皆さん、沢山の写真データの収納場所に困ったりしていませんか?そこで便利なのが「ウェブアルバム」です。
    これはデジカメで撮影した写真や、イラスト、画像などをインターネット上で保存・公開できるサービスなのです!
    例えばパソコンの容量が少なく、保存しきれない画像データをアップロードしてウェブ上で保管したり、旅行などの写真や自分で描いたイラストをアップすることにより、友人や家族、会社でも共有することが出来るんです。

    ウェブアルバム

    名前 保存容量(無料) 保存期間 アップロード制限 特徴
    Picasa Web Album 1GB 無制限

    1GB

    Googleアカウントを持っていれば使用できる無料のサービス。編集した写真をクリックひとつでアップロードできる。
    共用した写真にコメントや注釈もつけられる。
    外部からの読み出しが可能なので、画像共有サイトからブログにリンクを貼り付けることが出来る。

    Picasa ウェブ アルバムには閲覧制限機能もあるので、限定公開も出来る。

    フォト蔵 無制限 無制限 月間アップロードが1GBまでだが、トータルの容量、枚数は無制限 無料サイトだが、アップ容量上限は無制限。ただし月間のアップロード容量は1GBまで。
    容量無制限かつ、ブログにも貼り付け可能。
    どちらかというと、写真共有サイトというよりは外部ブログとの連携得意としている。
    はてなフォトライフ 無制限 無制限 毎月30MBまで はてなユーザーなら誰でも使用可能。お絵描き、動画アップロード機能、無料ブログのはてなダイアリーへの写真アップロードが可能。
    また、はてなスターという評価システムがあるのも特徴。
    Flickr 2GB トータル200枚を超えると古い写真は一覧に表示されなくなる 月間アップロードが100MB リサイズの種類が豊富。リサイズしたものを実際自分の目で確かめることが出来る。スライドショーやアルバム作成のためのコード、ブログ埋め込みのプラグイン等が多数ある。

    これがあれば自分のパソコン内に収納する必要がなくなり、パソコンも快適になり、写真の整理も簡単ですね。
    是非活用してください

    デザインの学校 ウェブデザイン応用編 第2回

     こんにちは。
    第2回目となりました応用編ですが、7月9日に行われた2回目では
    まず毎回授業の終わりに出される宿題の答え合わせから始まりました

    先生がおっしゃった記事と同じように Dreamweaver で仕上げるといった内容でしたが、
    応用編の受講生はみな(?)見事クリアしました!

    その宿題の中で、左寄せで文章を作成する場合、その下の文章がどうしても中途半端な位置に回りこんでしまい、四苦八苦するという事態に陥りました

    まず、二つの文章を隣にすべく

    <div class=”box”> ~ </div>と<div class=”box2″> ~ </div>という
    class をつくり、隣同士にしました。
    しかしその下にある文章が回り込んでしまい、どうしていいのかわからず・・・

    そこで、回り込みを禁止するそこで便利なタグがあります
    <br clear=”all” />
    です
    これを入力することにより、下の文章は「上にきてはダメ」と理解し、
    回り込みを禁止することができます

    ・・さて、今回の宿題は1Pのみだったのですが、ページ数が多い場合は
    CSS を複数にすると便利だと学びました。

    確かに、ページ数が多い場合に、全てHTMLで作成したら修正する手間がありますもんね
    なのである程度のルールをCSSでいくつか作っておき、それに応じて修正すると作業量が
    かなり減るようです!

    2回目の授業は Fireworks の基礎から応用まで勉強しました。
    まずは初歩的なこととして

    ファイルサイズ:容量
    イメージサイズ:画素数・解像度
    クオリティー:画質

    の3点を頭に入れつつ、WEB、DVD、ゲームなどのモニタへ映し出す世界では 72dpi (OSが用いる解像度)ということや、スパムとしてブロックされない安全なメール添付は 3MB (あまり大きいファイルですと、ファイルが重すぎて相手に迷惑がかかる)まで、デジカメや写真素材の基準となるイメージサイズの VGA は 640×480 といったことを学びました。(ちなみに VGA とは画面解像度(がめんかいぞうど)とはコンピュータ等のディスプレイにおける解像度のことです)

    Fireworks では様々な画像修正方法があるのですが、そのひとつに「トーンカーブ」というものがあります。
    トーンカーブとは画像補整機能の一つで、画像全体の色調やカラーを調整することが出来るものです。例えば写真が暗かったり、明るかったりするのを修正できるという優れものです。

    さて、今回の宿題は新しくなるマウントピア黒平ブログのビジュアル面を作成するという内容でした。
    どんなキャッチコピーにするか・・・悩みます

    話は変わりますが、受講生の作品集やサイトを公開するのに欠かせないものがあります。
    それは「レンタルサーバー」です!

    これは完全に無料で利用できるレンタルサーバー(ホームページスペース)のことです。
    強制的に作成したページに広告が挿入され、その収益により無料提供されるといったものです。
     

    レンタルサーバー

      

      

      

      

      

      

      

      

    名前 容量 広告 CGI 特徴
    FTP
    無料 有料オプション DB
    SiteMix 1.5GB あり あり 無料で利用できるはもちろん、PHPやCGIも利用出来、容量も1.5GBと大きい。また、ブログ作成ツールで有名な「WordPress」まで標準で搭載されている。
    有料プランも細かく、自分にあった有料プランのみ設定できる。
    FC2 1GB あり 無し
    (フッターにFC2のリンク1個)
    × 初心者にオススメでわかりやすい。知名度も高い
    サブドメインも自分の好きなものを指定し、付けられる。
    ○(1DBのみ)
    TOK2 容量無制限 あり あり 無料の掲示板、カウンタ、アクセス解析の利用もでき、HP作成方法の解説がある。また、POP3機能付き無料Webメールと組み合わせた利用も可能。容量無制限なのが嬉しい
    デジデジ 1~10GB あり あり × CGIや、PHP等は、利用できないが、アクセスカウンターやメールフォームなどHPに必要なCGIは、あらかじめ用意されている。
    広告の画像やサイズを自由に選ぶことが出来る。
    ×
    忍者ホームページ 容量無制限 あり あり × 使い勝手の良いレンタルサーバー。広告は最下部にテキスト1行。
    保存容量が無制限なのが魅力
    ×
    @PAGES 1GB なし あり × 1GBといった大容量で容量を気にせずにファイルをアップロードすることができる。
    ×
    Yahoo!ジオシティーズ 50MB あり あり × Yahoo! JAPANのサービスとの組み合わせが大きな特徴。日記やゲストブックなどのツール類や、
    「アバター」、HP作成をサポートしている
    ×
    XREA 300MB

    あり

    あり

    1つのユーザーで多数のドメインや、複数のレンタルサーバーアカウントを取ることが出来たり、自分で設定できるところが多く、初心者向きではない。
    しかし、使いこなせれば非常に自由度が高く、安価なレンタルサーバー

    以上が私が調べた特に有名なところです。このように様々な種類のレンタルサーバーがあります。

    いずれのサービスにもそれぞれ特徴があるので、あとは皆さん(ユーザー)自信が何を一番必要とするかを考え、自分に一番あったレンタルサーバーを活用して下さいね。

    デザインの学校 ウェブデザイン応用編 第1回

    皆様こんにちは。年内にクリエイターになりたいと思っている受講生の一人です。
    7月2日(土)より今年のWEBデザイン応用編WEBデザイン応用編のカリキュラム)が始まりました。
    受講生が復習する様子をお伝えする、このブログにて、その授業内容をほぼリアルタイムでご報告していきたいと思います。

    まず、今回の応用編でデザインするホームページは、甲府市最北の黒平町にある「マウントピア黒平」。
    今夏リニューアルし、ビジネスブログとして生まれ変わる予定です。ビジネスブログとはホームページとブログのいいとこ取りした素敵なシステムらしい・・・CMSとかを用いて、「見た目はホームページでも中味はブログ」・・・そんな感じです(技術的なことはまだよく分かっていません)。

    第1回目の授業では、Dreamweaver、HTML、CSS など基礎編で学んだ知識のおさらいと、今後作業のスピードアップに必要なPCやソフトのショートカットを学びました。

    ショートカットの一例です。デザイン以外の業務でも、知っていると得すると思います。ショートカットを覚えるだけでも、仕事が早く正確になると先生はおっしゃっていました。

    • Ctrl + C キー:コピー
    • Ctrl + X キー:切り取り
    • Ctrl + V キー:貼り付け
    • Ctrl + Z キー:元に戻す
    • Ctrl + A キー:現在のウィンドウ内のアイテムをすべて選択する
    • F2 キー:オブジェクトの名前を変更する
    • Windows ロゴ + E キー:エクスプローラー
    • Alt + Tab キー:別の実行中のプログラムに切り替える(Alt キーを押しながら Tab キーを押して、タスク切り替えウィンドウを表示)

    もっと知りたい人は、マイクロソフトのキーボード ショートカット キーの一覧をご覧ください。

    また、ファイルの送受信やFTPの時に利用される圧縮(冷凍)には、ウィンドウズの場合は「zip」、Macの場合は「sit」などがあり、
    両方のOSで共通して利用できるのが「lzh」で、ファイルサイズを軽量化するためにも、これらのファイル形式に圧縮(冷凍)して送付するのがベターです。

    このデータ転送やデータ共有で欠かせないのが「オンラインストレージ」サービス。

    オンラインストレージ

    名前 容量 保存期間 アップロード制限 特徴
    無料 有料オプション
    SugarSync 5GB 料金により異なる 基本無制限

    100MB

    無料版でも容量が大きい。
    好きなフォルダをオンラインにバックアップするように指定することが可能。
    自動的に同期。日本語対応している
    Dropbox 2GB 100GB 無制限 350MB ローカルドライブ(フォルダ)のような感覚で扱える。また、アプリから直接フォルダーを指定してファイルを開くこともできる。
    ZumoDrive 1GB 500GB 無制限 100MB 基本設定において、オンラインストレージ上のファイルが主体となっているため、一度ファイルを「ZumoDrive」上にアップロードしてしまえば、自分のPC内からはファイルを削除できる
    firestorage 250MB 2GB 最大7日間 250MB 会員登録をする必要がなく、気楽にデータをインターネットに保存ができる。転送速度が速い。
    ソラ箱 5.1GB なし 無制限
    (半年ごとの更新)
    100MB 容量が大きい。ウインドウズ用、iPhone用のクライアントを利用することも可能。
    SkyDrive 25GB なし 無制限 50MB 機能がシンプル。
    HotmailやMicrosoft Officeのオンラインバージョンなど、Windows Liveサービスに統合されている。また、画像や写真には良い表示オプションがあり、ファイルの閲覧や共有が簡単。
    MediaFire 無制限 なし 無期限 200MB ディスク容量無限、アップロード制限無し
    登録もメールアドレスとパスワードのみですぐ使える。

    と言われるものでして、有名なのは「スカイドライブ」でしょうか?
    大量の容量のデータをいちいちCD-RやUSBで持ち歩くのは面倒だといった方にうってつけの
    代物です。

    例えば職場でのデータを自宅に持って帰りたい場合、
    データを圧縮し、各HPにアップロードするだけでOK

    あとはご自宅でそのデータをダウンロードすれば良いといった形です
    とても便利なので皆さん是非使って見てください。

    では2回目にまたお会いしましょう

    • デザインでお困りの企業様
    • 人材や教育でお困りの企業様