カテゴリー別アーカイブ: webサービス

[無料ツール]簡単、お手軽にロゴデザインをしてみよう

皆様、あけましておめでとうございます。
スタッフ「ほ」です。
年末年始、いかが過ごされましたか?

私は幸いにもお休みをいただくことができました。
特に遠出をするわけでもなく、自宅でゆっくりと過ごしましたが、毎年の敵である「正月太り」に対抗すべく、9月のエントリーでも書きましたスマホの位置情報ゲームで、がんばって歩きました。
歩きまくりました。

おかげで体重、減りこそしないものの、増加を食い止めることができました。

さて、年明け1回目の今回のエントリーは、Adobeソフトではなくインターネット上で無料で利用できるサービスのご紹介です。

ロゴ、作成したことありますか?
デザイン考えるの大変ですよね。特にクライアントさんに複数の案を出さなければならない時なんか。。
もしくは、作成してみたいけれど、どうすればいいのかわからない、という方もいるかと思います。

そんな時、大きな助けになってくれる「Wixロゴメーカー」という無料のWebサービスがあります。
※高品質データや商用利用は有料(でもとってもリーズナブル)になります

Wixロゴメーカー
https://ja.wix.com/logo/maker

ユーザー登録(無料)後、ほんの3ステップだけでロゴが出来上がっちゃいます。

実際に作成しながら説明していきますね。

まずはサイトにアクセスしましょう。
https://ja.wix.com/logo/maker

ステップ0.ユーザー登録

サイトにアクセスしたら「いますぐはじめる」ボタンをクリックしましょう。

メールアドレスとパスワードを決めて入力したら「新規登録」ボタンを押すことですぐにロゴ作成が始まります。

ステップ1.必要情報の入力

最初にロゴに入れる名前とタグラインを入力します。
タグラインはキャッチコピーみたいなものだと思っていただければいいかと思います。
名前の下に小さく入りますが、不要であればタグラインは省略可能です。

私はこんな感じで入力してみました。

入力が終わったら「作成する」をクリックします。

ステップ2.問いに答える

いくつかの質問が出てきます。
最初はビジネスを入力するように促されます。
バンフートレーニングスクールはPCスクールなので「パソコンスクール」と入力しました。

次は、デザインの傾向を聞かれます。複数選択可能です。
私の好みで「モダン」「フォーマル」「テクノロジー」を選んでみました。

この後は複数回、下のように「どちらのデザインが好みか?」という問いが続きます。

最後にロゴの使用目的を聞かれます。
私は「ホームページ」と「名刺」をチョイスしてみました。

ロゴの生成が始まります。

ロゴの生成中

少し待っていると、たくさんのロゴデザインが生成されました。

ロゴがたくさん生成された

「モダン」「フォーマル」といった私の好みにドストライクなデザインがたくさんです。
どれもかっこいい!

ステップ3.カスタマイズ

しかも、このデザインたち、自分好みにさらにカスタマイズをおこなえます!

かっこいいデザインの中から、悩みに悩んで、このロゴに絞りました。

絞り込んだロゴ

ロゴにマウスを載せると出てくる「詳細設定」ボタンをクリックします。

画面が編集モードに切り替わります。
画面左部でロゴの色、フォント、アイコンの変更などがおこなえます。

ロゴの編集画面

私はアイコンだけ別のものにしたかったため、「アイコン」欄で別のアイコンを選択しました。

アイコンの変更

アイコンのサイズや位置を調整します。

アイコンサイズの調整

終わったら画面右上の「次へ」をクリックしましょう。

次の画面でWix内でホームページを同時に作成するかを問われます。
今回はロゴのみ入手したいので画面右側の「ダウンロード」をクリックします。

ホームページ作成の有無

料金プランが表示されます。
作成したロゴを商用利用する場合は、こちらでプランを選択することになります。

2つプランがありますが、ざっくりと説明するとアドバンスロゴは印刷もできるベクターデータ入り、ベーシックロゴはWebサイトやプロジェクター投影用のスライドに挿入できるロゴデータのみが入ったもの、と考えればいいかと思います。

どちらのプランも商用利用OKです。

ご自身の趣味で作成したホームページなどに挿入するロゴの場合は、ページ下部にあるこのリンクから無料でロゴのJPEGファイルを入手できます。

無料ダウンロード

商用のサイトに掲載する場合は、最終的にプラン契約が必要となりますが、JPEGファイルは無料で作成できますので、まずは複数パターンのロゴを作成して、実際にサイトに入れてみたイメージを検討して最終的にしっくりきたロゴを購入するのもアリかもしれませんね。

ちなみに私が作成してダウンロードしたJPEGファイルはこちらです。

作成したロゴ

いかがでしょうか?
ロゴ作成でいつもお悩みの方は是非お試しください。

「ツールに頼らず、自分で作ってみせる!」という方、バンフートレーニングスクールが応援します!
ロゴデータ作成の定番ソフトはAdobe Illustrator。
バンフートレーニングスクールでは、Illustratorを基礎から学べる講座をご用意しています。

バンフーのイラストレーター講座、詳細はこちら

無料体験もございますので、ぜひ一度スクールへ体験にいらしてください。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[web]無料の動画素材

先日、スクールのメールマガジンをご購読いただいてる方を対象に「ホームページをHTML5に変更しよう」という特別講座を実施しました。

アンケートでも高い評価をいただくことができ、また久しぶりにスクールにいらっしゃっていただいた方に修了後のお話を伺ったところ「学んだ内容を生かして仕事しています!」といううれしいお言葉もいただけました。

インストラクターとして一番うれしい言葉です。

こんにちは。スタッフ「ほ」です。

講習の中で、動画をホームページに組み込んだり、動画をページの背景にしたりするテクニックをご紹介しました。

▼こちらで完成のサンプルが見られます。

movielesson完成サンプル

ぜひ、受講生の皆様には、ご自身で練習をしていただきたいと思いますが、動画のファイルが気軽に用意できない方もいらっしゃるかと思います。

そんなときに便利なのが、インターネットで動画ファイルがダウンロードできるサイトです。

NHKクリエイティブライブラリー

名前の通り、NHKが運営しているサイトです。
NHKアーカイブスの番組や番組素材から切り出した映像や音声が「創作用素材」として提供されています。

とても個人では用意できなさそうな貴重な映像もたくさん公開されています。

営利目的での利用はできませんが、個人の練習用であれば問題ありませんし、ファイル形式も最初からmp4という嬉しい仕様。変換無しでそのまま利用することができます。
ユーザー登録やログイン作業も不要です。

今回、上記でリンクした完成見本のデモページも、このNHKクリエイティブライブラリーからダウンロードした動画に差し換えてあります。

とても美しい映像素材だらけですので、一度時間があるときに覗いてみてください。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Web]小さなアイコンを文字として扱う

6月になりました。蒸し暑い日が増えてきましたね。夏の気配がしておきております。

春と秋のような季節が好きなスタッフ「ほ」にとっては、ちょっとだけつらい季節の到来です。

さて、本日はとってもナイスなWebサービスをご紹介です。

——

例えば、ナビゲーションボタンに小さなアイコンを入れたい場合、みなさんならどうしますか?

グラフィックソフトなんかでGIFファイルを作成して利用する、もしくはボタンそのものを画像で作成する、なんてのが一般的かなと思います。

ただ、グラフィックで作成すると、フォントサイズが変わった時にまた画像をリサイズして作り直す必要がありますし、色を変えたい場合もまた作り直しってことになります。

そんな小さなアイコンをフォントとして表示できるWebフォントがあるんです。

Font AwesomeというWebフォントサービスです。
http://fortawesome.github.io/Font-Awesome/

使い方はとっても簡単。ユーザー登録なんかもいりません。

なかなか使い方は奥深いんですが、今回はカンタンに使えるさわりの部分だけご紹介してみます。

利用の手順

利用はカンタン、以下の2ステップです

  1. Font Awesomeを利用するためのタグを1行書く
  2. アイコンを利用したい場所に適当なインライン要素タグを書いてクラスを指定する

以上です。

では、1工程ずつやってみましょう。

ステップ1

最初のステップでは、Font Awesomeを利用するための準備をします。

Font Awesomeを利用するには、関連ファイルを一式ダウンロードして、自分のサイトに組み込んでしまう方法と、Font Awesomeのサーバーから呼び出して利用する方法の2つがあります。

後者の方がカンタンに利用できるので、そちらでやってみましょう。

HTMLファイルの<head>から</head>の間に以下のタグを貼り付けます。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />

上記のタグはXHTMLを基準にしてありますので、HTMLのページで作っている場合は、最後の「 /」を外してください。

準備はこれだけです。さぁ使ってみましょう!

ステップ2

例えば、以下のようなソースがあったとして…

<p>ダウンロード</p>

この「ダウンロード」の文字の先頭にアイコンを入れたい場合、以下のように「ダウンロード」の文字の前に適当なインライン要素のタグを書きます。
ここでは<span>タグを使ってみます。

<p><span></span>ダウンロード</p>

さらに追加した<span>要素に以下のクラスを指定します。

<p><span class="fa fa-download"></span>ダウンロード</p>

以上です。ブラウザで確認してみましょう。

カンタンでしたねー。

アイコンの種類

上記のように、クラス名に「fa fa-(アイコン名)」と指定することで、任意のアイコンを指定することができます。

他にも以下のようなアイコンが呼び出せます。

アイコン クラスの指定
fa fa-shopping-cart
fa fa-sitemap
fa fa-tag
fa fa-search-plus
fa fa-thumbs-o-up
fa fa-trash
fa fa-truck
fa fa-user
fa fa-car
fa fa-bus
fa fa-subway
fa fa-file-o
fa fa-gear

上記は一例で、まだまだ種類はたくさんあります。

↓のページを参考にしてみてください。
http://fortawesome.github.io/Font-Awesome/icons/

装飾

ここで表示しているアイコンは、文字の扱いですから、CSSで文字として装飾を行うことができます。

ボタン作ってみましょう。

HTMLソースを用意します。

<ul id="fnav">
<li><a href="#"><span class="fa fa-sitemap"></span> サイトマップ</a></li>
<li><a href="#"><span class="fa fa-car"></span> 交通アクセス</a></li>
</ul>

では、CSSで装飾をしてみましょう。

#fnav {
	padding: 0px;/*リストのパディングをクリア*/
	margin: 0px;/*リストのマージンをクリア*/
	font-family: "Hiragino Kaku Gothic ProN", Meiryo,  sans-serif;/*フォントの指定*/
}
#fnav li {
	list-style: none;/*リストマーカーをなしに*/
	width: 10em;/*横幅の指定*/
	float: left;/*リストを横並びに*/
	text-align: center;/*文字を中央揃えに*/
	margin-right: 10px;/*ボタン間の隙間を指定*/
}
#fnav li a {
	display: block;/*幅を有効にするためブロックレベル要素に*/
	padding: 5px 10px 3px;/*ボタン内側の余白*/
	text-decoration: none;/*リンクの下線を消去*/
	color: #FFFFFF;/*文字の色を白に*/
	font-weight: bold;/*文字を太く*/
	border: 2px solid green;/*まわりの枠線を表示*/
	border-radius: 10px;/*角丸の指定*/
	background-image: -webkit-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: -moz-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: -o-linear-gradient(270deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-image: linear-gradient(180deg,rgba(177,218,177,1.00) 0%,rgba(0,130,0,1.00) 100%);/*背景のグラデ*/
	background-color: #008700;/*グラデーション未対応ブラウザのための背景色*/
	-webkit-box-shadow: inset 1px 1px 0 #D0FBDE;/*ボックス内側の白いハイライト*/
	box-shadow: inset 1px 1px 0 #D0FBDE;/*ボックス内側の白いハイライト*/
	text-shadow: -1px -1px #025104;/*文字を立体的に見せる影の指定*/
}

ブラウザで確認すると、以下のようになります。

DEMOページ

どうでしょう?画像ファイルは一切使っていませんが、ここまでの表現が可能になります。

画像を使用していない分だけ、修正や変更も容易ですし、データの軽量化が見込めます。

かなり便利に使えるサービスです。ぜひチャンスがあったら利用してみてください!


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!Dreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[web]Google map のこと

クリスマスも、もう終わりですね。
皆様は、どんなクリスマスを過ごされましたか?

我が家では、手作りケーキが思いのほか上手にできて家族で盛り上がりました。
こんばんは。スタッフ「ほ」です。

スクールの年末年始のお知らせがあります。
こちらのエントリーをご覧ください。

さて、本日のネタです。

Dreamweaver講座のレッスンでページ内にGoogleマップを埋め込む方法をご紹介しております。

ざっくりと手順を説明すると、Googleマップにアクセスして、住所を入力して位置検索をします。

地図の縮尺と座標を整えます。

地図の左上にある鎖のマークをクリックします。

表示されたボックスから「ウェブサイトへの地図埋め込み用 HTML コード」をコピーします。

自分のWebページにコードを貼り付けることで、ページ内にGoogleマップが表示されるようになります。

サンプル1

ただ、この時に、地図内のポップアップには、住所が出てしまうので、できればお店や会社の名前を入れたいところです。

こういう時は、Googleマップに住所を入れずに、店舗名や会社名を入力して検索してみましょう。

Googleマップに店舗名や会社名の吹き出しが出るようであれば、この地図の状態で、鎖のマークから埋め込み用のコードをコピーします。

そのコードをページに埋め込んだサンプルがこちらです。

サンプル2

また、地図が小さいと、この吹き出しが邪魔になることもあるので、非表示にすることも可能です。

コピーしてきたコードから、ちょっと大変なんですけど「(省略)…iwloc=A&amp…(省略)」と書いてある部分を見つけ出し、この「A」を削除すると、吹き出しが出なくなります。

サンプル3

「そもそも、うちのお店がGoogleマップに出ないんだけど…」という方は、Googleプレイスに登録しにいきましょう。

さて、今回が2013年最後のエントリーとなります。

皆様、どうぞよいお年をお迎えください。


バンフートレーニングスクールでは、ホームページ制作講座を開講しています。

このブログで記事を書いているスタッフ「ほ」が特別なアプリケーションを使わずに基本的なWebページを構築する方法をレクチャー。

まったくの初心者の方大歓迎!ステップアップ編としてDreamweaverというアプリケーションを使った実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

ホームページ制作基礎講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ