Bootstrap3を使ってアイコンフォントのダウンロードサイトを作ったのでまとめ

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

イラストフォント配布サイト作りました!

Bootstrapを使って新しいサイトを作ってみました!

案件で検討する前に一度テストしておきたかったので
今回Bootstrapを使ってサイトを作成してみました。

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

スタンプフォント! -スタンプみたいに使えるかわいいイラストのフリーフォント-

イラストをフォント化したTTFフォントの配布サイトです。

Windows、Mac OS X以降で使えます。
Webフォント用のファイルも準備予定です。

個人、商用ともにフリーです。
ご自由にお使いください^^

自分で好きなものだけWebフォント化していただいても大丈夫◎

デザインの一部や、ワイヤーフレーム作成時などにお役立ていただけると嬉しいです。

こういうのがあると便利ー!などのご意見もお待ちしています!!

Font用のSVGファイルはFireworksで

ちなみにサイトのデザイン、アニメーションGIFの作成、フォントの元になったSVGファイルの作成はFireworksで。

詳しい手順などは以下のサイトがとっても参考になりますのでぜひ見てみてください♪

Bootstrap下調べ

bootstrap

というわけでBootstrapを使うにあたって、いろいろ調べ事をしたのでメモしておきます。

Bootstrap 3でレスポンシブを無効にできるか?

Bootstrap 2系は要素を追加してレスポンシブを実現するようになっていたそうなのですが、3系は標準でレスポンシブ対応とのこと。

今回のサイトはPC用のフォント配布サイトということもあって、レスポンシブである必要もあまりなかったのでレスポンシブを無効にする方法を調べました。
以下の手順で簡単にできました。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>を削除する。
<link rel=”stylesheet” href=”css/bootstrap.min.css” media=”screen”>の下に、
<link rel=”stylesheet” href=”css/non-responsive.css” media=”screen”>を追加する。
<script src=”js/respond.min.js”></script>を削除する。
グリッドシステムを使用するときはカラムの設定は必ずcol-xs-*にする。

引用:Bootstrap移行ガイド レスポンシブの無効化

英語ですが、公式サイトにも手順がのっています。

公式:http://getbootstrap.com/examples/non-responsive/

段組はどういう仕組み?

bootstrapでは12カラムのグリッドシステムが採用されています。
トップページは4:4:4、下層ページは8:4で割って使うことにしました。

画像はどのサイズで作る?

%で指定されているグリッドシステムなので、このときこのカラムが○pxというのがいまいちわかりにくいです。なので全体的に画像は大きめに作って、グリッドに対してwidth:100%で貼り付ける必要があるのかなー?という印象。

フォームのスタイリング

classを適切に指定してあげれば、使いやすいフォームに簡単にスタイリングできます。
Contact Form 7だったらこんな感じ。

デザインの調整

以前、2系をさわろうとしたとき、なかなか複雑すぎて
必要な物だけ自分で書いたほうが早そう…と思ってしまって挫折したことがあったのですが
3系は見た目もすごくシンプルになっていて、その分CSSの装飾もシンプルなので追加のCSSで上書きがしやすい感じでした。

その他参考にしたサイトなど

全体的な感想

どっちかというと画像少なめなティザーサイトとか、管理画面とかそういうものをさくさくっと作るのによいのかなーという印象を受けました。

いろんな仕様があって、その仕様にすべて対応できるのか?とかを調べて使うにはちょっと大変かもしれませんが自分に決定権のあるこういう個人サイトをパパっと作るにはものすごく便利です!

なんとなく勝手がわかってきたので、今度はレスポンシブで作ってみたいと思います☆

Gumroadはじめて1週間経ったので売上や感想をまとめました!

先日、日本円も設定できる!Gumroadはじめました!という記事を書いたのですが、その続きです。

Gumroad結果レポート頼む!とのお声を頂いていたので、1週間たっての売上報告と感想、その後のGumroad関係の動きで気になったものなどまとめてみたいと思います!

先日、日本円も設定できる!Gumroadはじめました!という記事を書いたのですが、その続きです。

私も早速Fireworks Stroke 100という、Fireworksで使えるストロークセットを1ドルで販売してみました。

Gumroad結果レポート頼む!とのお声を頂いていたので、1週間たっての売上報告と感想、その後のGumroad関係の動きで気になったものなどまとめてみたいと思います!

売上報告

販売したのはFireworks Stroke 100という、Fireworksで使えるストロークセット。

$1で売り出しました。

gumroad-1

結果、979アクセス、売上件数21件、売上金額$13.65となりました!

うち一件は自分買いなので、20名もの方にお買い上げ頂いたことになります。
本当にありがとうございます…!!!

振込はまだあとみたいなので、PayPalに実際に振り込まれたらそのときもまたレポートしたいと思います!

あっという間に日本語対応した

もともと日本円の金額設定はできていたようですが(ただ、決済手続きでエラーになってて使えなかったけど-前回の記事参照-)あっという間に日本語表記に対応しましたね。

で、肝心の日本円指定の商品決済。

2月15日時点では購入手続きでエラーになって、肝心の購入ができませんでした。

上手くいくのかはまだ試していません…!

(だ、誰かFireworks Stroke 100 100円版買ってみてもらえませんか…!><)

感想

記事書いた直後にしか売れない

当たり前ですが継続的に告知をしていかないと、販売は難しいですね。

今回私が出品したものもはじめの数日間でどどっと買っていただき、あとはぽつ…ぽつ…。

ここ数日はほとんど0でした。

でも「どうやったら売れるか」とか「どうやって告知したらいろんな人に知ってもらえるか」、「どういうものが需要があるのか」をお手軽に実践、研究できるので、とっても勉強になります!

時間があればまたいろいろ作って販売頑張ってみたいです…!!!

日別のアクセス数が見たい

トータルのアクセス数と累計販売数は見ることができるのですが、販売ページへの日別のアクセス数は計測できません。

日ごとの売上数は売上が上がった時点でGumroadからメールが来るのでそれを集計すればいいのですが、日ごとのアクセス数は見られません。

測定用に短縮URLとか挟めばクリック数はとれると思うのですが大変なので、Gumroad側で見れるようになったらうれしいなぁ…なんて。

短縮URL使って個別に集計

うれしいなぁ…なんて。

とか思った直後に、短縮URLサービスを活用して、twitter用、Facebook用、自分のサイト用、その他…とURLを分けて、どこ経由で売れたかとか集計するともっと勉強になるかも!と思いました。

今度やってみます!

やっぱり知らない人からは買わないよね

実は英語で登録したものも販売してました。

試しに#fireworksのハッシュタグをつけて英語の文章とともにツイートしてみたのですが…

結果は売上0w

(今回、海外の方も1名買ってくださったのですが、日本語がわかる方だったので日本語版の販売ページから買ってくださってました。)

販売ページへのアクセス数は日本語ページの半分くらいあったので、1つくらい売れてもいい気がするのですが…コンバージョン率0%でした。

gumroad-2

やっぱり知らない人からはいくら1ドルでも買わないよね…。

(あと私の英語力がアヤシすぎてダメだったんだとも思う><)

いかに信用してもらうことが大事かということが身にしみてわかりました。

今回買ってくださった20名のみなさま、本当に本当にありがとうございます…!!!!!!

1ドルで販売すると思いのほか手数料が…

21名(うち一名自分)に$1買っていただき、手数料など引かれた金額が$13.65でした。

$21→$13.65に。

少額決済なので、手数料30¢が地味ーに効いています…。

仕方がないといえば仕方がないのですが、$2くらいで売れるものでないといろいろとつらいかも?

とにかく、「自分から直接何かを買ってもらう」ってものすごく感動する

フリーマーケットとかデザフェスとかでものを販売するあのドキドキ感を味わうことができました。
誰か買ってくれるかな…。誰も買ってくれなかったらどうしよう…。みたいな。

売れたときの感動といったらもう;;

その後の各種展開で気になったもの

この一週間で関連したものがなんかいろいろできてました。

このスピード感…!!!

それらから何個かピックアップ

Ameroad

Ameroad

gumroad-3

和製Gumroadともいえるサービスが出来上がってました。

クレイジーワークスの村上福之さんが作ってヤフオクで売る→Razestさんに150万円で売れる→google walletに対応したり、進化しながら運営中(イマココ

って経緯みたいです。

本家Gumroadと違って、トップページではセールスランキングなどを公開しています。

こちらのサイトに関連する記事

Gumad β

Gumad β : Gumroadの出品アイテムをワンクリックで無料告知

Gumroad を利用すると、TwitterやFacebookで簡単にコンテンツ販売を行えるものの、告知手段はリアルタイムに流れるつぶやきやフィードに限定されて います。つぶやきやフィードはその瞬間を見逃すと、フォロワーやフレンドであっても、“二度出会えない”可能性があります。Gumad βはそうした機会損失を減らし、個人によるコンテンツ販売のプロモーションをサポートするサービスです。

とのこと。

GumroadのURLを登録するだけで、こんな感じでページを作ってくれます。

gumroad-4

Facebookコメント欄がついているのでうまく使えばいろいろ告知に使えるかも?

Gumsafe

Gumsafe

こちらは『個人がコンテンツを簡単に販売できる「Gumroad」で、販売コンテンツのURLを購入者に知られないようにするサービス』だそうです。

Gumroadオープン当初から言われていた、『購入者に対してWeb上とメールでコンテンツのURLを知らせ、直接ダウンロードしてもらう仕組みになっている。このURLが流出すればコンテンツ代金を払わずにダウンロードし放題になってしまう 』という点を解消しよう!というサービスのよう。

使い方などはこちらに詳しく書いてありました

ほかにもこういうのもあったよー!なんていうのがありましたらぜひ教えてくださいね☆

日本円も設定できる!Gumroadはじめました!

手数料は売上の5%+30セントという、格安でデジタルデータを自分で販売できるサービス、話題のgumroadを試してみたのでレポートします!

 

話題のgumroadを試してみたのでレポートします!

gumroadって?

gumroadはデジタルデータを自分で販売できるサービスです。

手数料は売上の5%+30セント。

これまでのいろんなサービスに比べて格段にお安い印象です。

販売の部分にのみ特化している

特徴として販売の部分にのみ特化している点があげられます。

最低限の簡単な説明分などは入れられますが、

プレビュー画像をたくさんあげたり…といったようなことはできません。

あくまで販売の部分のみをやってくれる感じ。

PRや商品の詳細については自分のブログ→販売の部分だけgumroad

という使い方がよいのかな?と思います。

自分のところで決済の仕組みを持たなくてよい

自分のところで決済の仕組みを持たなくてよいので

いろいろ楽です。

売上があがったらその分振り込んでもらってーという感じで

アフィリエイト感覚で使える感じ。

デジタルデータを作ることに集中できていいなぁと思いました。

日本でも似たようなサービスがあったらしい

日本でも昔似たようなコンセプトのサービスがあったそうなのですが

2007年に終わってしまったようです…。

http://www.nifty.com/pay/

タイミングって大事ですね。。。

円建てもサポートしている

設定画面から円も設定できます。

※ご注意
2月15日現在、日本円で登録されたデータは決済処理で先に進めないようです…今はまだドル設定にしておくのをおすすめします><

マーケティングは全部自分で!

新着販売リストや売れ筋商品の紹介ページなどECっぽいページは一切ありません。

登録したら、あとの販促は全部自分で。

Amazonなどは確かに高いですが、ある程度検索でひっかかったりなどなどいろんなメリットが受けられます。

そういったものはgumroadには一切ないです(たぶん。今のところ)

本当に販売の仕組みに特化している分、手数料も安いので

個人でファンの多い人(インディーズのアーティストさんとか)なんて方にはホントもってこいのシステムだなぁと思いました。

ただし、信用できる相手から買うこと

ファイルのアップロードやURLに特にチェックはありません。

なので、買ってみたら空っぽのデータだったとか、著作権を侵害したデータを売っていたとか悪意のあるファイルをアップロードすることもできそうな…(この辺未検証ですが…)

なので、当然ですが信用できる相手から買いましょう!!

導線がものすごくわかりやすい。

私はFacebook認証で登録したのですが、登録した後の流れがものすごくスムーズでした。

認証ボタンクリック→販売するファイルを選択→登録→詳細を入力→シェアしよう!

といった感じでスムーズに流れていって、流れに沿って登録していくだけではじめの1つのコンテンツの登録まで終了してしまいました。

早い。

すごく学ぶことの多い画面でした。

みなさんもぜひ一度なにか登録してみてください!

ということで、私もひとつ販売をはじめました。

Fireworksのいろんなストロークデザインパック100です。

Fireworksのストロークって結構いろんなことができるんですよー!!

ということで、いろいろ作り貯めているものの中から100種類集めてみました♪

全部スタイル登録して、スタイルファイルも同梱しているのでスタイルパネルから読み込んで使っていただければ線を書いて、あとはクリックひとつで楽々適用できちゃいます。

おもしろいデザインから、実用的なさまざまな破線までいろいろ揃えました。

もちろん商用利用OKです♪

もし興味のある方はぜひダウンロードしてみていただけるとうれしいです♪

https://gumroad.com/l/vFP

↓こんなかんじの100個セットです。(クリックで画像拡大します)

100円で販売中。

$1で販売中。

※2月15日現在、日本円で登録されたデータは決済処理で先に進めないようです><新しくドルで登録し直したので、よろしければこちらからお願いします><。

販売ページはこちら

https://gumroad.com/l/vFP

買い方

買い方なのですが、まずは販売ページにアクセスします。

https://gumroad.com/l/vFP

右下の【I want this!】ボタンをクリック。

こんな感じで、自分のメールアドレス、クレジットカードの番号、セキュリティーコード、有効期限を入力する欄が表示されますので入力して【Pay】ボタンを押します。

決済が完了すると、入力したメールアドレス宛にダウンロード用のURLが記載されたメールが届きます。(試しに自分で買ってみたw)

その他、日本のGumroad関連の記事など。

すでにいろいろと考察記事がでていましたのでまとめてみました!

よい意見だけでなく、気をつけた方がいい点、今後出てきそうな問題点(他人のコンテンツを無断で販売など)に言及していらっしゃる方もいろいろ。

正しく使えば、いいサービスになると思うので

今後の動向などチェックしてみたいと思います!

CSS Nite back2basic #8「Fireworks」に登壇させていただきました。

2月3日(金)に東京の麹町にあるKDDIウェブコミュニケーションズセミナールームにてCSS Nite back2basic #8「Fireworks」が開催され、そちらに登壇させていただきました。

2月3日(金)に東京の麹町にあるKDDIウェブコミュニケーションズセミナールームにてCSS Nite back2basic #8「Fireworks」が開催され、そちらに登壇させていただきました。

70名弱の方にお集まり頂いたとのこと、
本当にありがとうございました!

Fireworksを基礎からじっくり、ということで
2時間いろいろとお話させていただきました。

ワークショップをやってみたりといろいろと新しい挑戦をさせていただいた2時間となりました。

東京で人前に出てお話しさせていただくのは
昨年3月のCSS Nite以来でしたので
めちゃくちゃ緊張しましたが、無事に終えることができてよかったです。

この度は本当にありがとうございました!

デジタルハリウッド福岡校さんで、Fireworksのセミナーを開催させていただきました。

バタバタしていて記事にするのがだいぶ遅くなってしまいましたが…。

1月18日(水)にデジタルハリウッド福岡校さんで、Fireworksの無料セミナーを開催させていただきました!
お忙しい方51名もの方にお集まり頂きました。本当にありがとうございました。

バタバタしていて記事にするのがだいぶ遅くなってしまいましたが…。

1月18日(水)にデジタルハリウッド福岡校さんで、Fireworksの無料セミナーを開催させていただきました。
お忙しい方51名もの方にお集まり頂きました。

本当にありがとうございました。

概ね好評だったようで、ホッと胸をなで下ろしております…!

Fireworksの便利な使い方を福岡で存分に語ることができて、
とっても楽しい2時間でした!

お越し下さった皆様、本当にありがとうございました!!!

CSS Nite ベストセッション2011に選出していただきました。

2011年に開催されたCSS Niteのセミナーの中から選ばれるベスト10セッションに、[FireworksマニアLIVE!]のセッションを選んでいただきました!

ありがたいことに2011年も登壇の機会を頂いたCSS Niteでは、39回の関連イベントを通して170セッションが開催されたそうです。その中から選ばれたベスト10セッションの中に、私の[FireworksマニアLIVE!]のセッションを選んでいただきました…!

最近では「YUKIさんですね!」より「Fireworksマニアの人ですね!」と言われることが多くなってしまったぐらいのインパクトを残してくれたFireworksマニアなのですが、(サイトのネーミングはじっくり考えた方がいいと思った(笑))

実はこのFireworksマニアを作ったきっかけというのが、今回選んでいただいたセッションを行ったCSS Nite LP14 Photoshopper Meets Fireworksというイベントなのでした。

まだイベントの詳細は決まっていなかったものの、CSS NiteのmixiコミュニティーでFireworksのイベントがある!という発表があった2010年の11月ごろのことです。当時Fireworks仲間がほとんどいなかった私はこのイベントの開催にそれはそれは目を輝かせました。

絶対行きたい…!そしていろんな人とFireworks愛を語り尽くしたい…!と。

しかしもちろん開催は東京。参加費に加え交通費に宿泊費…。福岡在住の私には痛い出費です。

でもどうしてもこのイベントだけは参加したい!

そこでない頭を使って考えました。

………Fireworksの使いこなしだったらちょっとだけ自信がある…

『そうだ、スピーカー側で参加すれば……!!!!!』

め、迷案ですね。

そこで私は早速主催の鷹野さんに連絡…す る の で は な く 、猛スピードでFireworksマニアを立ち上げました。そう。超勝手で一方的な猛アピールですw

こんなきっかけではじめたFireworksマニアだったのですがサイト公開とともにあれよあれよとブクマは伸び…たくさんの人に見ていただくことができ、日本にもこんなにたくさんFireworks好きがいたのか…!とそれはそれは感激したのでした。

で、せっせとサイトを更新し続け数日後。

鷹野さんから連絡が!

『CSS NiteのFireworksの回にスピーカーとして参加しませんか??』

キター!!!!!!!お誘いきたよーーーーーー!!!!!!!

ああもう私の思いを届けてくれたインターネットって素敵。

そんなこんなでこのイベントでお話しさせていただくことが決まり、イベントに参加することができたのでした。

このイベントがあったおかげでFireworksマニアをはじめることになり、Fireworksマニアがあったおかげで、出版社の方からお声かけいただき、本を書かせていただくことになり。

人生って本当に何が起こるかわからない…!!!!とあらためて感じた一年でした。

そんな思い出深いイベントでの今回のベストセッション賞…もう、ホントにホントにうれしいです!

今年もいろいろとお話しさせていただく機会を頂いており、

【福岡】1月18日(水)福岡発 「速習デザインFireworks CS5/4/3」出版記念セミナー「FireworksマニアのYUKI氏による厳選Tipsチュートリアル」
【東京】2月3日(金)CSS Nite back2basic #8「Fireworks」
【北九州】2月10日(金)a-blog cms Training Camp in KANMON 2012 Winter

でそれぞれお話をさせていただくことになりました。このような機会を頂き、本当にありがとうございます。

ご都合がつけばぜひ足を運んでいただけますと幸いです。

Fireworks interviewsにインタビューしてもらった!話。

Fireworks Interviewsという、世界各地のFireworksユーザーにインタビューをし、それを掲載しているサイトからインタビューを受けました…!!

…英語で(やばい)

http://fireworksinterviews.com/

という、世界各地のFireworksユーザーにインタビューをし、
それを掲載しているサイトからインタビューを受けました…!!

Fireworksユーザーにはおなじみの
今やFireworks界最強のテクスチャ配布ブログといっても過言ではない、
indigo note(http://indigonote.com/)さんにバトンを繋いでいただき、今回のインタビューとなりました☆

うれしい!

indigo noteさんのインタビューページはこちら(ていうかindigo noteさんかわいすぎてやばい。)

ということで私も載りました。

ででーん。

ピースとかしちゃってます。

浮いています。

いや、普段どこかに出掛けてもいつも私は写真を撮る側なので、
まともに正面から顔が写っている写真がほとんどないのですよ…。
なのでこういうときいつも困る…。

ちなみに、最初この写真を送っていたのですが、

顔が小さいよー!とあえなくボツになりました。

ねこ忍者に顔はめ。

いい感じに正面顔。

…。

これでこの一覧に並んだら大やけどするところでした。

やさしく止めてもらってよかった。

さて、肝心のインタビューなのですが、

海外のサイトなので、インタビューはもちろん英語でした。

全部。

google翻訳先生に手伝ってもらったりして、
質問の内容は理解できたのですが、

回答を上手く英訳できない…!!!!!!

……………………。
そこで困り果てた私は、

日本語が恐ろしくペラペラの

ロックロブスターのNed(@1080d)に頼み込んでみました。

「英訳してもらえませんか…!!!!」

本当に快く訳してくれました。
Ned、本当にありがとう!!;;

ということで、きれいな英語で無事に答えることができました!!!

画像はいろんなところから拾ってきてくれたみたいで
とてもいい感じにまとめていただいてます…!

Fireworks Lovers Jのこととか
明星和楽とかWordPressコミュニティーとか、
(Fireworksとは全然関係なくなっちゃってるけどw)
いろいろ思いつく限りどさくさにまぎれて宣伝しました!!!

よかったら見て見てくださいー!

http://fireworksinterviews.com/yuki-yamaguchi

P.S とりあえず、痩せたい。(もう何年いっているかわからないので多分無理)

FC2ブログのスマートフォン用公式テーマをデザインさせていただきました♪

FC2ブログさまのスマートフォン用公式テーマをデザインさせていただきました♪
「Sweet」という名前で配布中です!

よかったら見てみてくださいね☆

10月が公私ともに充実しすぎていたので(ものはいいよう※お察しください)
なんかもうなかったことになっているYUKIです。

こんばんは!

10月、このブログ一回も更新してない…ぐす;;

そんな10月の最終日に!
デザインさせていただいたFC2ブログさまのスマートフォン用公式テーマが公開されましたー!

わーい!

こんな感じのデザインになっております♪

今回久しぶりにWordPress以外のブログのテーマをデザインしたのですが、
レンタルブログのテーマ作りって実はものすごく思い入れがあるんです。

まだプログラマーやりながらWebデザイナーの勉強をしていた頃から
勉強のためにいろんなブログサービスのテンプレートを作っては配布してWebデザインの勉強をしていたのです。

↓こんな感じの作ってました。
こうして並べるとなんかもう懐かしくてほろ苦すぎるw

FC2ブログさんはそれがご縁で、PC用の公式テンプレートのデザインをさせていただいたこともあったり。

もう5年以上も前の話ですが…!

なので今回、ちゃんと(?)Webデザイナーとなった今、
こうしてあらためてご縁があって、とってもうれしかったです♪

こうして今Webデザインのお仕事ができるのも
ブログのテンプレートづくりという武者修行があったから!

レンタルブログテンプレのデザインは私の原点!w

なんかいろいろ思い出してまたやる気があがりました☆

今回デザインさせていただいたスマートフォン用公式テーマは「Sweet」という名前で配布中です!

よかったら見てみてくださいね☆

FC2ブログ

ちなみにその当時からある私のFC2ブログはこちらw