【WEB】美容室ホームページ製作

新規開業する美容室のホームページ制作を担当したためまとめます。

美容室について

・美容室の名前は「Hair Resort Lino」
・コンセプトは「プチリゾート気分でくつろげる癒しのプライベートサロン」
・場所は「福島県須賀川市」
・完全予約制

サイト

　
■Hair Resort Lino
http://www.hear-resort-lino.com/

■PCサイト／スマホサイト

テンプレートサイト

準備中…

【動画】トリック動画の撮影方法

iPhone/スマートフォンではVineというアプリを使って以下のようなトリック動画を撮影可能なようです。

トリック

アプリ

■特徴
・このアプリを使って６秒動画を撮影できる
・撮影画面をタップしている間だけ撮影可能
・６秒以内なら何度も撮影可能
・前回タップして撮影下部分がうっすら見えた状態で次のシーンを撮影できる
・保存してある動画を組み込み可能
・撮影した部分をカット可能
・撮影した動画はVineに投稿可能

サイト

■Vine

https://vine.co/

Vineは動画投稿型のSNSサイトです。
興味があればこちらもご利用ください。

【動画】動画の製作（準備編）

駅伝チームとして結婚式の余興を頼まれる機会があったため、
チームがこれまで訪れた想い出の地を巡って結婚式場まで
たすきをつなぐ動画を作ろうということになりました(^^)／

その動画を作るにあたって学んだ製作方法についてここでは紹介していきたいと思います☆彡

動画製作ソフト

動画を作るにあたって使用するソフトはフリーソフトのみを使用します。
❏AviUtl（Windows用）
❏iMovie（Mac用）

それぞれにできること、操作性の違いがありますが大雑把に言うと以下のような感じです。
❏AviUtl → 動画を自由に製作できる
❏iMovie → テーマを選択してある程度決まった型に素材を当てはめられる

操作性は全く違いますが、この2つを使えばそれなりの動画が作れるかと思います。
特にAviUtlは使いこなしていけばどんな動画でも作れそうな気がするほど自由度が高いですが、
手間と慣れが必要かと思われます。。
（せっかく性能の良いMacを買いましたが、Macでは似たようなフリーソフトがまだ見つけられなかったため、Windowsも併用します(´・ω・)）

AviUtl

AviUtlは以下からダウンロードできます。

AviUtlのお部屋


まずは簡単な使い方として以下の動画をご確認ください。



AviUtlの詳細な使い方はここのサイトを読めこんでいけば、かなり理解できると思います。

AviUtlの易しい使い方

iMovie

iMovieはAppleStoreからダウンロード可能です。

❏AppleStore - iMovie
https://itunes.apple.com/jp/app/imovie/id377298193?mt=8



iMovieではテーマを選んで動画と写真を切り替えながらタイトルを追加して調整することで、
質の高い動画が比較的簡単に作れます。



動画製作をはじめるにあたっては最初にこちらから使用してみるとよいかと思います(^^)/

完成動画（結婚式余興ムービー）

いろいろと苦労しながら製作して実際に結婚式で流れた動画が以下になります(^^♪




細かい箇所についての説明は、機会があれば別な記事で紹介していきます('ω')ノ

【MAC】Macで初めに覚えておくべき操作方法について

今年の正月にiMacを購入しました(^^)/



Apple iMac
(Retina 5K Display 27/3.2GHz Quad Core i5/8GB/1TB Fusion/AMD Radeon R9 M390)

Androidアプリを作るためにも性能が良いNewマシンが欲しかったので、
思い切って購入(´・ω・)

動画製作やWebアプリ、ホームページの製作なんかにも手を広げていきたいとおもいます(^^)/


まぁ買ったみたところでここまでMacに触れてきたことがないため、
まずは使い方から勉強するため一通りの設定をいじりながら
Macで最初に覚えておくべきことをここでまとめておきたいと思います。

Windowsとの違い

Macを操作するとWindowsとの違いに戸惑う大きな点は以下のあたりになります。
❏キーボードの違い
❏マウスの違い
❏フォルダ（エクスプローラ）の違い

などが挙げられますが、触れていくと細かな点で違いがあることに気づきます。
どちらかというとLinux寄りな雰囲気ですが、慣れるまでには
少し時間がかかりそうな気がします|дﾟ)

ショートカットキー

Windowsとのキーの違いもあるため、一般的なショートカットについてまとめます。

ショートカット	説明
command + X	切り取り
command + C	コピー
command + V	ペースト
command + Z	取り消す
command + A	すべて選択
command + F	検索
command + G	次を検索
command + H	最前面のウインドウを非表示 すべてのウィンドウを隠すには、「command + option + H」
command + M	最前面のウインドウを最小化して Dock にしまう すべて最小化するには、「command + option + M」
command + N	新規ウインドウを開く
command + O	ファイルを開く
command + P	印刷
command + S	保存
command + W	最前面のウインドウを閉じる。 すべてのウインドウを閉じるには、「command + option + W」
command + Q	アプリの終了
command + option + esc	アプリを選択して強制終了 「command + shift + option + esc」キーを 3 秒間押したままで、最前面の アプリのみを強制終了
control + スペース	検索フィールドの表示／非表示を切り替え
スペース	選択されている項目をプレビュー
command + tab	アプリの切り替え
command + shift + “~”	ウインドウの切り替え
command + shift + 3	スクリーンショット
Command + “,”	最前面のアプリの環境設定を開く

マジックマウス

マウスにはマウスホイールがなく、最初の設定では右クリックもないため戸惑いました( ;∀;)
でも慣れると使いやすそうなイメージです、操作方法は以下のような感じ('ω')




元Windowsユーザーは右クリックも最初から使用できるようにしておきましょう(^^;

Finder

Windowsでいうところのフォルダ（エクスプローラ）の代わりとなるものとしてFinderあります。

❏エクスプローラでは右上にあった閉じるや最大化／最小化なんかはFinderでは左上になります。

❏サイドバーなんかはエクスプローラと同じような使い方ができそうな感じです。

❏ファイルの削除がDeleteキーや右クリックでできず、ゴミ箱にファイルをドラッグ＆ドロップする必要があるため、ゴミ箱をサイドバーに表示させましょう。設定方法は以下の手順で行います。
　①Finderを起動してメニューから「移動」→「フォルダへ移動」を押下

　②フォルダの場所に「~/.Trash」と入力して「移動」ボタンを押下して「~/.Trash」に移動

　③サイドバーに「.Trash」をドラッグ＆ドロップ

❏ステータスバーとパスバーの表示することで、現在どの階層にいるか表しているかやフォルダの項目数、ストレージの空き状況が確認できます。
（Finderの表示メニューから「パスバーを表示」「ステータスバーを表示」を選択）

【HTML】【CSS】コピペで使えるサンプル集－引用部分編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは他サイトから文章を引用した時に使う引用部分（brockquote）のデザインについて
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－背景編

────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

引用部分サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

“

infinityforest

「引用部分①」
画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを
いろいろデザインする
”

<div style="text-align: right;"> <a href="http://infinityforest.net/"><i>infinityforest</i></a></div> 「引用部分①」<br /> <a href="http://infinityforest.net/home/archives/1530">画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを<br />いろいろデザインする</a><br /> <span style="color: red; float: right; font-size: 700%; height: 25px; margin: 10px 0; padding-top: 5px;">”</span> </blockquote>

引用部分②
ここに引用する文章を記載してください。

<blockquote style="border: 2px dotted #D4D4D4; margin: 10px; padding: 10px;"> 引用部分②<br /> ここに引用する文章を記載してください。 </blockquote>

❝ Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.

tympanus

<blockquote style="background: #fff; border-radius: 5px; box-shadow: inset 0 2px 0 rgba(188, 147, 200, 0.7), -5px -4px 25px rgba(0, 0, 0, 0.3); padding: 30px; width: 500px;"> <span style="color: #bc93c8; font-family: serif; font-size: 80px; font-weight: 700; line-height: 32px; text-indent: 90px;">❝</span> <span style="color: #b4b4b4; font-family: "alegreya" , serif; font-size: 24px; font-style: italic; line-height: 40px; text-indent: 100px;">Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.</span> </blockquote> <cite style="color: white; font-family: 'Alegreya', serif; font-style: italic; font-weight: 700; padding-left: 550px; text-shadow: 0 1px 1px rgba(0,0,0,0.3);"> <a href="http://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/" target="_blank">tympanus</a> </cite>

【HTML】【CSS】コピペで使えるサンプル集－背景編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここではホームページやブログのデザインに大きく営業する背景や模様について
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－引用部分編


────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

背景サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

背景・模様①

<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #00aaee; background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様①</span> </div>

背景・模様②

<div style="-moz-background-size: 50px 50px; -moz-box-shadow: 1px 1px 8px gray; -webkit-background-size: 50px 50px; -webkit-box-shadow: 1px 1px 8px gray; background-color: #ff9900; background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-size: 50px 50px; box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様②</span> </div>

背景・模様③

<div style="background-color: #840b2a; background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); box-shadow: 1px 1px 8px gray; float: left; height: 250px; margin: 10px; width: 375px;"> <span style="font-size: x-large; margin: 100px; position: absolute;">背景・模様③</span> </div>

【WEB】マウスホバーエフェクトの導入

今回はGitHubに公開されているcssライブラリ（Hover.cssファイル）を導入することで、
手軽にマウスがのった時のボタンやリンクの動作（ホバーエフェクト）を設定する方法をご紹介いたします。

しばらくAndroidアプリ開発からは離れHTMLやCSSを利用したWEB開発の方法を紹介していますが、
これも後々アプリ開発に繋がると思っていますので今は情報をまとめておきたいと思います(^^;

Hover.cssの導入手順

導入手順は以下のとおりです。
ブログなどに導入する場合は＜HEAD＞タグが編集できる必要があります。

①Hover.cssをダウンロードします。

②ダウンロードは以下のページにアクセスして「Download ZIP」から行います。

　https://github.com/IanLunn/Hover

③「Hover-master.zip」というファイルがダウンロードされますので、

　中の「css」フォルダにある「Hover.css」ファイルをコピーしておきます。

④「Hover.css」をWEB上に公開し、以下のようにHEADタグ内に記載します。

<head>
    <link href="css/hover-min.css" rel="stylesheet">
</head>

Demo

主な動作としては、開発者の方がDemo用のページを用意していますので、まずはそちらをご覧ください。

http://ianlunn.github.io/Hover/


Demoではボタンのみの動作を紹介していましたが、これはリンクでも画像でも利用可能です。



Pulse




ボタン以外にも「Hover.css」を有効活用できる効果的な利用方法を紹介していきたいと思います。

テキスト編

ほたるの光　まどの雪
書（ふみ）よむつき日　かさねつつ
いつしか年も　すぎのとを
あけてぞけさは　わかれゆく

ほたるの光
まどの雪
書（ふみ）よむつき日
かさねつつ
いつしか年も
すぎのとを
あけてぞけさは
わかれゆく

画像編

随時更新予定…

【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは以前紹介した見出し編（シンプル）に少し多めにCSSを使って、少し凝ったデザインの見出しをまとめていきます。


CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しています。
画像は使用しておりません。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・見出しのタイトルは書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－背景編
・【HTML】【CSS】コピペで使えるサンプル集－引用部分編

────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

見出しサンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

見出し①

<h1 style="-moz-box-shadow: 1px 1px 3px #292929; -webkit-box-shadow: 1px 1px 3px #292929; background: #e3e3e3; background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8)); box-shadow: 1px 1px 3px #292929; color: #454545; margin-left: -20px; margin-top: 0; padding: 10px 20px; position: relative; text-shadow: 0 1px 0 white; width: 70%;"> 見出し①<span style="border-left: 20px solid transparent; border-top: 10px solid #c8c8c8; height: 0; left: 0; line-height: 0; position: absolute; top: 104%; width: 0;"></span></h1>

見出し②

<h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: #1d8ade; border-left: 1px solid #036; border-top: 1px solid #036; box-shadow: inset 1px 1px 4px #036; color: white; margin: 0 0 30px 0; padding: 12px 10px; position: relative; text-shadow: 1px 1px 2px #333;"> <span style="background: transparent; border-color: #1d8ade transparent transparent transparent; border-style: solid; border-width: 15px; bottom: -27px; content: ' '; height: 0; left: 14px; position: absolute; width: 0; z-index: 2;"></span> 見出し②</h1>

見出し③

<h1 style="color: #111111; font-size: 20px; line-height: 1; margin: 30px 0 0 0; padding: 14px 5px 10px 10px; position: relative;"> <span style="-moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); background: #999; height: 12px; left: -5px; position: absolute; top: 0; transform: rotate(45deg); width: 12px;"></span> 見出し③ <span style="-moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); -webkit-transform: rotate(15deg); background: #777; height: 8px; left: -10px; position: absolute; top: 15px; transform: rotate(15deg); width: 8px;"></span> </h1>

【HTML】【CSS】コピペで使えるサンプル集－ボタン編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

第二弾は「ボタン」編として一般的に使用されているようなものをまとめていきます。
コピペだけで使用可能なものだけを紹介しています。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・ボタンのキャプションはご使用時には書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－背景編

・【HTML】【CSS】コピペで使えるサンプル集－引用部分編

────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

ボタン サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

※マウスを載せた時の動作は【WEB】マウスホバーエフェクトの導入の方法を利用しています。



<button style="background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 1px solid #DDD; color: white; padding: 10px 0; width: 100px;"> ボタン①</button>



<button style="background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));"> ボタン②</button>



<button style="background: #EEE; border: 3px solid #DDD; color: #111111; padding: 10px 0; width: 100px;"> ボタン③</button>

【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは見出し編として一般的にブログ等で使用されているシンプルな見出しをまとめてみましたので、
気に入ったものがあればご利用ください(^o^)／

CSSがわかる方は色や大きさも好きにカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しています。
画像は使用しておりません。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・見出しのタイトルは書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－背景編

・【HTML】【CSS】コピペで使えるサンプル集－引用部分編

────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

見出しサンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

見出し①

<h1 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;"> 見出し①</h1>

見出し②

<h1 style="background: #eee; border-bottom: 1px dashed #aaa; border-top: 1px dashed #aaa; box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; color: #665555; font: bold 24px/1.6 Arial, Helvetica, sans-serif; padding: 5px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1);"> 見出し②</h1>

見出し③

<h1 style="-moz-transform: rotate(-3deg) skew(-3deg); -ms-transform: rotate(-3deg) skew(-3deg); -o-transform: rotate(-3deg) skew(-3deg); -webkit-transform: rotate(-3deg) skew(-3deg); background: #f0e800; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; color: #333333; font: bold 30px/1.6 Arial, Helvetica, sans-serif; margin: 0 -1px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1); transform: rotate(-3deg) skew(-3deg);"> 見出し③</h1>

【写真販売】PIXTAでの写真販売

今日はPIXTAで販売している写真について紹介していきます。

家にデジカメで撮った良い風景の写真やお気に入りの写真とかがあれば
ぜひ販売してもらいたいと思いますので、
今回はPIXTAのサイトについて説明していきたいと思います。

❏PIXTAについて

まずPIXTAのサイトについて概要を説明させていただくと、

・PIXTA（ピクスタ）はプロアマ問わず、誰でも写真・イラスト・動画の販売が可能
・作品が購入されれば広告やWEBサイトなどの世界中のメディアで使用されます

☆写真は携帯カメラで撮ったものではなく、ある程度画質の良いデジカメで撮ったものなら
販売可能なようです。

❏販売方法と料金

作品を販売するためにも、まずはPIXTAでの作品の販売方法を知っておきたいと思います。
作品は単品購入と定額購入があります。

単品購入は１点ずつの購入となり、画質に応じて料金が変わります。
画質を落とせば少額の料金で購入できますが、このサイトを利用するような方は
ある程度良い画質のものを購入しそうな気がしてます。

定額購入は25DL/日や250DL/月でダウンロードが可能な定額制の購入となり、
大量に画像が必要な場合には便利になる制度かと思いますが少しお高めです(^^;

定額購入は25DL/日や250DL/月でダウンロードが可能な定額制の購入となり、大量に画像が必要な場合には便利になる制度かと思いますが少しお高めです(^^;

❏写真を販売するためには

これはPIXTA側で写真販売ガイドがありますので、こちらをご参照ください。

■写真・イラスト・動画販売ガイド

https://pixta.jp/how_to_sell

簡単に概要だけ説明しますと、

①会員登録

②入門テスト

③写真をアップして審査

④審査が通れば販売スタート

⑤購入されればクレジット獲得

ここでは③が少し手間取ることになるかと思います。

なぜならすでに販売された写真と似た写真は審査を通りにくいため、

良い写真でも先に似た写真があればなかなか販売まで辿りつけないことになります。

また、画質もある程度良くサイズを調整した上でアップする必要があります。

ここは根気よくやる必要がありますね(ﾟДﾟ)

④で運良く審査がとおり、⑤で販売され購入されるとクレジットが獲得できます。
 10クレジット以上貯まると［1クレジット＝108円］換算で現金に交換できます。

❏作品紹介

最後に私が販売している写真を一応紹介しておきます。

2015/9/3時点で販売されている作品は以下になります。

■写真5枚

■イラスト１枚

■動画１つ

まだあまり販売・購入されていませんが、
良い作品ができあがったら販売していきたいなと思ってます。

自分の作品がどこかで使われると考えてみるのも楽しみ方の一つかと思いますので、
もし自分も販売してみたいと思った方はPIXTAを利用してみてはいかがでしょうか(^^)