読者です 読者をやめる 読者になる 読者になる

webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

jQuery:クリックしたら表示・非表示するロールオーバーボタンの実装方法

今回は、プラグインを使わないで作る『ロールオーバーボタンの作り方』です!

 

例えば

  • 『Q & A』みたいな項目に対しての説明が長くなってしまうとき
  • 『メニューボタン』のように、入れ子入れ子で子ページがいくつもあるとき

 

説明が長い位場合は特に必要性を感じますよね。そのままつらつらと書き続けると、ユーザーがずっとスクロールしなくちゃいけなくて見るのが大変なのです。

 

そんな時に役立つのがこの『表示・非表示ボタン』です。


 jQuery:クリックしたら
ロールオーバー表示するtoggleボタンの実装方法

f:id:serinaishii:20151020093952p:plain

 

動作としてはこんな感じです。

 

表示(非表示)ボタンを押す

  ↓  ↓  ↓

連動して、説明文が表示(非表示)になる

 

 下にdemoも作ってあるので、触ってみてください。

続きを読む

論理問題:プログラマーに必要な『論理的思考力(ロジカル・シンキング)』を身につけよう!

会社で上司に報告をするとき、取引先の相手にプレゼンをするとき。相手にわかりやすく、順序立てて話をする力ってとっても必要とされますよね。

 

それは対人でなく、対コンピューターなプログラマーも同じ。プログラムを作るうえで、物事を論理的に考える力はとても大切です。

 

そこで、今回は『論理的思考力(ロジカル・シンキング)』を身につける為の問題を、いくつかご紹介してみようと思います。


論理問題:プログラマーに必要な
『論理的思考力(ロジカル・シンキング)』を身につけよう!

f:id:serinaishii:20151014202601p:plain

 

そもそも論理的な思考ってなんでしょうか?

 

ある有名なお話があるので読んでみてください。

 

ジョーは酒場で論理学の教授と知り合った。

 

「論理学ってのはどういったもんですか?」
「やって見せましょうか。お宅には芝刈機があります?」
「ありますよ」
「ということは、広い庭があるわけですね?」
「その通り!うちには広い庭があります」
「ということは、一戸建てですね?」
「その通り!一戸建てです」
「ということは、ご家族がいますね?」
「その通り!妻と2人の子供がいます」
「ということは、あなたはホモではないですね?」
「その通り!ホモじゃありません」
「つまりこれが論理学ですよ」
「なるほど!」

 

深く感心したジョーは、翌日友人のスティーブに言った。

 

「論理学を教えてやろう。君の家には芝刈機があるか?」
「いや。ないよ」


「ということは、君はホモだな!!」

 

聞いたことあるお話でしたか?オチはジョークですね(笑)

 

順序立てて推測していく教授に反して、論理的な思考がわからないジョーは端的に中身をすっ飛ばして解釈してしまったというお話です。

 

ポイントは『物事の繋がりを考えて、ひとつずつ順番に並べていき、その先の答えを導く』ということですね。


論理問題

では、比較的有名な論理問題を3つ後紹介しようと思います。

  1. 川渡り問題
  2. 3人の美女
  3. 消えた1ドル

ヒントはなし。スクロールした先に答えが書いてあるので、出来るだけ自分で頑張って解いてみてください。

続きを読む

jQuery:チェックされたら送信可能にするボタンをjQueryで制御する

週末にwebサイトの機能追加の依頼が入り、 メールフォームに利用規約の同意ボタンを実装しました。 

 

自分用メモとしてHTML、jQuerycssのソースをまとめておきます。誰かの参考になれば幸いです!

 

f:id:serinaishii:20151013141327p:plain


チェックされたら送信可能にするボタンをjQueryで制御する

動作としてはこんな感じ

 

最初にページが表示されたときは、送信ボタンが押せない状態になってる

    ↓  ↓  ↓

"「利用規約」に同意します"にチェックが入ったら、
送信ボタンを押せるようにする

 

デモも作ってみたので実際に触って確認してみてください。


demo


 

条件分岐:チェックボックスに…

  • チェックが入っている → 送信ボタンが押せる
  • チェックが入っていない → 送信ボタンが押せない

HTML

<!-- チェックボックス -->

<input id="checkBtn" type="checkbox"><label for="check">「<a href="#">利用規約</a>」に同意します</label>

 

<!-- 送信ボタン -->
<input id="submitBtn" type="submit" value="submit" disabled>

 

送信ボタン「value="submit"」

 

submitの記述を変えると、送信ボタンに表示されている文言が変わります

 

送信ボタン「disable」

 

送信ボタンが押せないように制御しています


 jQuery

$(function() {
  $('#checkBtn').on('change', function(){
    if ($(this).is(':checked')) {

 

    //チェックが入ったら、送信ボタンを押せる
    $('#submitBtn').prop('disabled', false);

 

    } else {

 

    //チェックが入っていなかったら、送信ボタンを押せない
    $('#submitBtn').prop('disabled', true);
    }
  });
});


 CSS

/* 送信ボタン */

input[type="submit"] {
padding: 10px 20px;
border: none;
background: #9FD6D2;
color: #fff;
}

 

/* 送信ボタン - マウスオーバー時 */

input[type="submit"]:hover {
background: #54A9BD;
}

 

/* 送信ボタン - 押せないとき */

input[type="submit"][disabled] {
background-color: #ccc;
cursor: default;
}


jQueryのことがよくわからない方へ

jQueryは事前に、プログラムを動かすためのソースを読み込んでおかないと動ごきません。

 

わからない人はとりあえず<head>部分に下のコードを記述しておいてください。

 

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

 

 jQueryの記述自体はjsファイル内に記述するか、HTML側にエンベット(「<script></script>」の中にコードを書き込む方法)でOKです。


実際に運用しているページはこちら

千葉音声研究所という、音声処理専門家さんのwebサイトの『お問い合わせページ』です。

 

f:id:serinaishii:20151019151636p:plain

 

www.chiba-onsei-lab.com

 

私はプログラミング初心者なので、簡単なjQueryからブログに載せていけたらいいなと思っています。

 

ブログ用に細かくコメントアウトを入れたので、私と同じような初心者さんの参考になると嬉しいです。

Photoshopとペンタブで、水彩風のイラストを描いてみました:webサイト制作

以前webサイトを作らせてもらったクライアントさんから、改修依頼として「キーイメージをイラストで描いて!」って言われたので頑張ってみました。

 

何も調べないで自己流で書いたので参考になるかわかりませんが、自分メモとして残しておきたいと思います。


Photoshopとペンタブで、水彩風のイラストを描いてみました

f:id:serinaishii:20151012195200p:plain

chiba-onsei-lab.com

 

音声処理の専門家さんのwebサイトなので、録音物の音声補正やりますよーって内容の画像です。

 

要望としては

 

・「言った・言ってないの水掛け論」を証拠音声で解決させたいという内容
・ベースは写真でなく、 [ ↓ ] こんな感じのPOPなイラストを描いてほしい
 (サイトの雰囲気に合わないようなら変更可能)

 

f:id:serinaishii:20151012200036p:plain

 

参考にいただいた絵だとちょっとサイトの雰囲気に合わないな~と思ったので、今回はなるべくゴチャゴチャしてない、シンプルで素朴な絵にしたいと思います。


Photoshopで水彩っぽい絵を描く:手順

まずはメモ用紙に構想

 打ち合わせに愛用してる無印のリングノートに思うがままカキカキ。下書き段階ではなんだか可愛げのない女性ですね…

 

f:id:serinaishii:20151012201346j:plain

 

女性が取引先と話している絵だけだとまだ印象が薄いので、吹き出しを追加しました。

 

吹き出しの中に書いた丸・三角・四角の順序を変えることで、「言ってること前と違うじゃん!」感を出します。

 

出来るだけ言葉じゃなくて、『絵や図で直感的に伝わるようにモノづくりをする』のが私のポリシー。人間は字よりも絵のほうが先に目に入ってくる生き物なのです。


Photoshopで下書き

本当なら、紙に書いたイメージをスキャン(携帯で写真撮ってもいいかな)で取り込んでトレースすべきだと思いますが、今回は簡単なパーツなのでそのまま下書きしていきます。

 

f:id:serinaishii:20151012202449p:plain

 

この辺はパーツの場所確認なのでふわっと適当に。え?適当すぎ…?

 

ペンタブ使って絵を描いたのなんて中学生以来だから…10年以上前かな?(当時は完全に趣味で遊んでいただけ)

 

久しぶりだったので上手く描けるか不安でいっぱい。でも、描き始めると意外とスラスラいけます。それにこのペンタブとっても使いやすい!

 

因みに、ペンタブはBAMBOOのもの。本当にサクサクですよコレ。

 

f:id:serinaishii:20151012203034p:plain

Wacom ペンタブレット Sサイズ ペン&タッチ Bamboo CTH-470/K0|Amazon

 

 この段階では、キーワードなどの文言は頭の中で考えるだけでまだ確定していません。書きながら構図に合った長さ・大きさを決定していきます。


線と塗りを分けて、レイヤー別に起こしていく

レイヤーごとにパーツを細かく分けて書いていきます。

 

例えば、人の線と塗り、電話の線と塗り、吹き出しの線と塗り…みたいに。

 

線を上に、塗りを下になるようにレイヤーを重ねて書き起こしていきます。今回は20レイヤーくらい使いました。

 

線のレイヤー

 

f:id:serinaishii:20151012203619p:plain

 

ロゴもそのまま使ったら堅くなるので、全部手書きでなぞってみたらいい感じにマッチしました。

 

塗りのレイヤー

 

f:id:serinaishii:20151012203636p:plain

 

水彩絵の具で描いたようなみずみずしい感じを出せたらなぁ~と思って、塗りレイヤーの不鮮明度を全体的に下げてみました。


水彩風っぽい塗り方の方法

一部だけ塗り方をこだわって、水彩風にしてみました!完全オリジナルなのでもっと他にいい方法もあるかもしれません。

 

f:id:serinaishii:20151012211714p:plain

 

塗りのレイヤーを複製して、片方の不鮮明度を下げ、もう片方は真ん中を消しゴムで消して淵だけを残す。たったこれだけ!

 

これを重ねると、水彩絵の具で描いたような柔らかいタッチになります。

 

本当は水彩風のブラシとかでできるかなーって思って探したのですが、ブラシってハンコみたいなパターンの連続だから、好きに塗ったりできないんですよね。


線と塗りのレイヤーを重ねて完成!

そんなこんなで完成したのがこちらです。

 

f:id:serinaishii:20151012195200p:plain

 

ゆるい手書きの線と水彩っぽい塗り方が相性いいですよね!構想~完成までにかかった時間は5時間くらい。

 

なにか1つ完成すると『あれ?もしかして私、ちょこっとならイラスト書けるかもしれない!』と勘違いしそうになります。笑

 

そのうちLINEスタンプ作りなんかも着手してみたいと思っているので、書き方とかお勉強していきたいと思います。

webサイト制作の落とし穴!初心者がやりがちなミス20選

8月の中旬から1ヶ月かけて、学校の課題として『webサイト制作』をしていました!
 
実際にクライアントを見つけて、サイトを作らせてもらうので、友人から依頼をもらった人や飛び込みで営業しに行った人など様々。できあがったサイトのレビュー会もしました。
 
そこで、『初心者の私たちがやってしまいがちな、サイト制作の落とし穴』のパターンが見えてきたのでまとめておきたいと思います。
 

私が作成したwebサイトについてはこちら

serinaishii.hatenablog.com


webサイト制作の落とし穴!初心者がやりがちなミス20選

ユーザビリティの落とし穴

  • ロゴにトップページへ戻るリンクを貼ってない
  • SNS(FacebookTwitter)と連携しない
  • ファーストビューで何のページかわからない
    (社名や個人名だけ載せて、内容の説明がなかったり、足りなかったり…)

f:id:serinaishii:20150929144201p:plain

 

[ ↑ ] サンプルとして作ってみましたが、これだと一見どんな事業をやっている会社なのかわかりませんよね。

 

例えば、右上やキーイメージに「システム・アプリケーション開発|グローバル・コミュニケーション」とひと言あればIT系の会社なんだな~と想像がつきます。


レイアウトの落とし穴

  • 全体的に余白が足りない、コンテンツを詰めすぎる
  • 線で区切ったり、色でコントラストをつけたりしない
  • 高級ペラいちのページを作るけど、レスポンシブ対応していない
    (高級ぺらいちのページは、元々スクロール主体なスマートフォンで見やすいように考えられたもの)

文章の落とし穴

  • 文章の改行をしない、段落が少ない、行間を詰めすぎる (読みづらい)
  • 文字を真ん中揃えにする
    (やるならコンテンツを真ん中揃えにした中で、文字は左端揃えがよい)
  • 文字が小さすぎる (基本は16px以上)

f:id:serinaishii:20150929143428p:plain

  • 個性的な書体を選びがち
  • ページに占める文字の割合が多いのに、読ませる工夫が不足している
    (線やテーブルで区切ったり、画像を入れたりなど)
  • 逆に画像が多くて、文章が少なすぎる (SEO的に上位入りが難しくなる)
  • ツリー構造ができていない (h1>h2>h3となる基本構造)

配色の落とし穴

  • 配色が不自然
    (モノクロなページに、いきなりショッキングカラーのアクセントとか…)

f:id:serinaishii:20150929143447p:plain

  • 背景色を濃い色1色でベタ塗りする
    (模様なし・文字の背景も同色で境目をつくらないパターンが多い)
  • コンテンツの全てを主張させてしまう
    (主張させるところ・させないところの差がないので、結果的にすべてが目立たない)

画像のデザインの落とし穴

  • 写真を元のまま使用する、適切な加工しない (大きさ、明暗、エフェクト)
  • バナーなどの画像を枠で囲わない (視線が逃げやすい)
  • 文字の配色が不自然

f:id:serinaishii:20150929143526p:plain

 

[ ↑ ] ひと昔前のサイトによくあるの蛍光色だったり、クリスマスカラーのように主張の強い色同士だったり…

 

こんな色使いだと、組み合わせによっては目がチカチカしちゃいますね。


見落としがちな落とし穴

  • Copyright(著作権表示)の書き方が違う
    (日本の場合は書かなくても問題ないけど、書くなら最低「© 20xx name」の3つが必要)

著作権表示について詳しくまとめました!

serinaishii.hatenablog.com


googleデベロッパツールを有効活用しよう!

 仮サーバーでも良いのでサイトをアップロードできるなら、PageSpeed Insights - Google Developersでサイトの状態を確認しましょう。(ローカル環境にあると判定できません)

 

f:id:serinaishii:20151008170510p:plain

 

  • ページの表示速度を基準に100点満点で採点
  • ミニファイ化(圧縮)できていない画像やファイルの洗い出し
  • モバイルファーストなサイトであるか(スマートフォン表示に適しているか)
  • フォントサイズ・画像サイズが見やすいかどうか
 
色々な角度からサイトを分析してくれるので、100点に近づけることでユーザーにとって優しいサイトになります。
 
目に見えない内部的なところはなかなか見つけにくいと思うので「サイトが完成した!終わり!」じゃなくて、欠点の改善も大切です。

webサイト制作の参考記事

過去の記事も併せてご覧ください。少しでもお役に立てる記事があれば幸いです。

 

打ち合わせの前に要点を確認

 

素材探しはこちら!

 

デザインで困ったらこちら!

 

コードミスはデベロッパツールで探すとGOOD

 

こんなのも取り入れてました

 

サイト制作でお世話になった配色サイト

 

サーバにアップする前に画像圧縮をしよう!

和柄屋 和柄Tシャツ・和柄小物・甚平の卸売業者 | WAGARAYA JAPAN : webサイト制作

和柄和柄Tシャツ・和柄小物・甚平の卸売業者 | WAGARAYA JAPAN

f:id:serinaishii:20151002221719p:plainwagaraya-japan.com


サイト制作課題 やっと完成しました!

8月中旬くらいから1ヶ月ほどかけて作っていた和柄屋さんのwebサイト。やっと完成しました!!

 

以前、ロゴを作ってるよーって記事にした和柄衣料・和柄小物を扱っているアパレルメーカーがクライアントさんです。

 

こちらの記事も合わせてご覧ください

serinaishii.hatenablog.com

 

このクライアントワークは学校の課題でした。自分でクライアントを見つけ、今まで学んだ知識を詰め込んで1つのサイトを完成させるというもの。

 

9月の中旬には9割方できていたのですが、細々した修正を経てやっとアップロードすることができました。自己満足ですがまとめ記事を書こうと思います。


クライアントの要望


jQuery ー 商品ページの写真・説明部分

f:id:serinaishii:20151002222358p:plain

和柄屋 和柄Tシャツ・和柄小物・甚平の卸売業者 | WAGARAYA JAPAN

 

下に並んでいる商品ボタンを押すと、スライダーになっている写真とその横にある商品説明が対応して変化します。

 

普通に通販サイトで見る仕組みですが、やってみると簡単じゃないんだなぁ~と思い知らされました。

私たちが普段何気なく使っているシステムも、どこかの誰かが頑張って作りこんだシステムなんだと改めて実感しました。

 

スライダーはbxSliderというプラグインを入れ、jQuery Templatesを使って画像を配列からスライダー用に吐き出しています。

 

bxslider.com

 

javascript.webcreativepark.net


jQuery ー オリジナルTシャツ 生地の色・柄のシュミレーション

f:id:serinaishii:20151002225646p:plain

和柄屋 和柄Tシャツ・和柄小物・甚平の卸売業者 | WAGARAYA JAPAN

 

和柄衣料の卸売・販売だけじゃなくて、高校生のときに作ったクラスTシャツのような「オリジナルのTシャツ」も1枚から作成できる企業さんです。

 

Tシャツの色が30色以上あるし、過去作品もいくつかあったので、クリックで色・柄を変えられるシュミレーター作ることにしました。

自分で色と柄を組み合わせることで、少しでも作成前のイメージに役立ったらいいなぁ~と思って。

 

---- 

 

jQueryでは、右側のサムネイルになっているTシャツボタンを押すと、左側の大きなTシャツに色が反映されるように設定しました。

 

色数が多かったのでひとつひとつ画像を用意するのではなく、background-colorで背景色だけ変更しています。全部画像で作ると33色×2サイズで66枚の画像が必要になるし、読み込みが遅くなるなーと思って工夫しました。

 

ちなみに、右側の縦長の画像はモバイル用の表示。地味にレスポンシブ対応してあります。

 

ポチポチTシャツボタンを押して色・柄が変わるのちょっと面白いので、お時間ある方は遊んで行ってください。


CSSフレームワーク ー レスポンシブデザイン

f:id:serinaishii:20151002230959p:plain

和柄屋 和柄Tシャツ・和柄小物・甚平の卸売業者 | WAGARAYA JAPAN

 

3つ目のポイントは「レスポンシブ対応」していることです。左がパソコンで見た表示、右が携帯から見た表示。パソコンでも、携帯でもそれぞれに最適な表示になってるよ!ということ。

 

パソコンで見ている方は、和柄屋のサイトを開いてブラウザの幅を広くしたり狭くしたりしてみてください。ちょこちょこ表示が変化しているのがわかると思います。

 

今年の4月にgoogleが発表した「モバイルゲドン」なんてことも言われてるからね。簡単に言うとモバイルフレンドリー(携帯表示の最適化)がされていないサイトの検索順位を落とすぞー!ってやつです。

本当かどうかわからないけれど、私が今まで作ってきたサイトはすべてレスポンシブ対応にしています。備えあれば憂いなし!

 

BootstrapというCSSフレームワークを使うと簡単にレスポンシブ対応ができるので、興味のある方は調べてみてください。

 

getbootstrap.com

 

www.atmarkit.co.jp


 最後に

和風デザイン・和風の色合いが苦手で納得いかなくて沢山悩んだり…


写真撮影をしたのが完成目標の10日前でギリギリだったり…


カメラマン・モデルも予定してた人と都合がつけられず、自分で撮影することになったり…

 

苦労も多々ありましたが、周りのみんなに助けられてなんとかここまできました。本当に良かった!!

 

----

 

そして、和柄屋さんのサイトは、内容の打ち合わせから、コンテンツ考案、サイトデザイン、写真撮影、サイト構築まで、すべてひとりで担当しました。

 

今まで個人的に3サイト作成してきましたが、全部プラグイン頼りでなく自分でjQueryを書いたのは初めて。

 

わからなくてサポートしてもらったところも多々ありますが、やっぱり『やりたいと思った動き』を描いた通りに実現できるのはすごく楽しかったです!!

 

6月中旬から学校に通いだしてもう半分が過ぎました。HTML・CSSを粗削りにしかわからなかった私がここまで成長できたのも、全ててっしー先生のおかげです。この場をお借りして感謝申し上げます。

 

www.felica.info

 

jeanperret2001.wix.com

 

クライアントにも想像以上の出来栄えだと喜んでもらえたし、このまま名刺・ポスター作成ともしかしたらTシャツのデザインも関わらせてもらえるかもしれない。

 

末永くお付き合いしていこうと思っています!


webサイト制作の参考記事

打ち合わせの前に要点を確認

 

素材探しはこちら!

 

デザインで困ったらこちら!

 

コードミスはデベロッパツールで探すとGOOD

 

こんなのも取り入れてました

 

サイト制作でお世話になった配色サイト

 

サーバにアップする前に画像圧縮をしよう!

Copyright(コピーライト:著作権表示)の正しい書き方を知っていますか?:webサイト制作

webサイトの1番下にある『著作権表示』色々な表記を見かけるけどどれが正しいのー?って思ったことありませんか?


Copyright(コピーライト:著作権表示)の
正しい書き方を知っていますか?

f:id:serinaishii:20150930211049p:plain

 

webサイトでいう『Copyright(コピーライト/著作権表示)』は、サイトの1番下にある

  • Copyright © 2015 sometimes study All Rights Reserved.
  • (c) 2010-2015 sometimes study All Rights Reserved.

こんな感じの表記のことです。

 

このページの所有者は私ですよ!という『著作権の所有を示すおまじない』みたいなものですね。ひとつずつ、一緒に書き方をおさらいしていきましょう!


著作権(ちょさくけん)』って何?

まず、著作権とは?ってところからですね。

 

著作権」と聞くと音楽、映画、絵画や本などが思い浮かぶと思いますが、日本では誰かによって作られた制作物には自動的に著作権が発生します

 

もちろんwebサイトやブログも、自分の思想や感情を創作物として表現した制作物のひとつなので、著作権が存在するんですね。


日本の法律的にみると
著作表示は書いていても意味はない

前述したように、日本では『著作物には、自動的に著作権が発生する』と法律で決められています。

(日本で作られたものは、他国から見ても著作権は自動的に発生していることとなります。)

 

なので、Copyrightの記述があってもなくても、勝手に誰かの創作物をコピーして利用したら違法です!

 

書いても書かなくてもいいけど、法律からみると書いていても意味はないよーという感じ。


Copyrightを書く理由

書かなくてもいいのに、みんな揃ってCopyrightを書くのはなぜでしょう。

 

ひとつは、著作権の所有を明らかにすることで、真似したりコピーされるのを防ぐため。著作権表示を書いておけば、勝手にコピーされたときに「著作権表示あるじゃん!」って強気になれますよね。

 

でも、1番の理由は『みんなが書いてるから

 

日本人はみんなと同じが安心する民族性なので、こんなに普及したんですね!


 Copyrightの書き方

みなさんがよく目にするのはこんな感じの著作権表示だと思います。

 

Copyright © 2010-2015 sometimes study All Rights Reserved.

 

で、いらないものを消して…実際に必要なのはこんな感じ。

 

© 2015 sometimes study

 

え!?こんなに短くていいの?って声が聞こえてきそうですね。

 

では、細かく分解して1つ1つ見ていきましょう


1. Copyright表記

Copyright © 2010-2015 sometimes study All Rights Reserved.


『 Copyright 』、『 © 』、『 (c) 』この3つは全て同じ意味です。
省くときは『 Copyright 』を消して、『 © 』か『 (c) 』を使います。

 

重複されているのをよく見掛けるのは、正直格好をつけたいから!長く書いてあったほうがなんだかソレっぽいよね!ってだけです。

 

『 © 』このマークってどうやって出すの?


©(copyright sign / 著作権表示記号)は文字実体参照とか特殊記号とか呼ばれる文字で、普通の変換では出てきません。

 

HTML側の記述で「 &copy; 」と書くと、ブラウザ側で「 © 」と表示されるようになります。

 

書くのが面倒な方は、どこかのwebサイトさんから「 © 」部分をコピーしてくればそれでも大丈夫です!

 

結論: 『 © 』か『 (c) 』だけ書いてあればOK!

 2. 発行年号・更新年号

Copyright © 2010-2015 sometimes study All Rights Reserved.

 

上の例の場合は

  • 2010年に著作権が発生 (発行年号)
  • 2015年に更新した (更新年号)

という意味になります。

 

更新年号を書くか書かないかはどちらでもいいのですが、発行年号を省くのはNGです!「2010年にこのサイトが公開されましたよー」という意味なので、残しておいてあげてください。

 

結論: 発行年号だけ書いてあればOK!

 3. 著作権 所有者の氏名

Copyright © 2010-2015 sometimes study All Rights Reserved.

 

この部分に入るのは、著作権を所有している人の名前です。

 

会社名・屋号・個人名などが記載されますが、webサイトの場合は一般的にサイト名と同じになります。

 

サイト名 = 著作権表示じゃないケース

 

一般的に~と言ったのはクライアント次第な部分もあるからです。

 

例えば、abc株式会社が運営しているサイトだけど、サイト名は『 abc web service 』にしたい!というときは、著作権表示を『 © 2015 abc Co.Ltd. 』や『 © 2015 abc Inc. 』とする場合があります。

("株式会社"の英語表記は、会社によって違うので都度確認してください)

 

この辺りはクライアントによってですね!

 

また、このようにサイトと運営者が異なる場合は、この著作権者名の文字をリンクにして、運営者へ繋がるようにしておくとユーザビリティ的にもGOODです。

 

結論: サイト名と同じにしておけばOK!

 4. サイト内の記述・写真・画像の著作の所在

Copyright © 2010-2015 sometimes study All Rights Reserved.

 

単刀直入にいうと、これは4つの要素の中で1番いらない表記です!

 

まず、『 All rights reserved. 』ってどういう意味?ってところからですね。

 

これは、『このサイト内の記述や写真・画像などの作品は、全て自分で作ったものですよ!』という意味です。

(なので、このサイト内の制作物の著作は自分にあります、ということに繋がります。)

 

サイト内にあるもの『すべて』を自分で作った場合は何も問題はありませんが、著作権が放棄されていないweb素材(画像や写真)を使用している場合は嘘つきになってしまいますので注意してくださいね!

 

フリー素材は多くの場合、使用を許可しているだけであって、「 = 著作権フリー」ではありません。二次創作・二次配布はダメ!とか書いてあると思います。

 

結論: 『 All rights reserved. 』はいらない

 Copyrightに必要なのは3つだけ

細かく説明を書いてきましたが、結局Copyright(コピーライト:著作権表示)に必要なのは以下の3つだけです。

 

© 2010 sometimes study

 

左から

  1. Copyright表記
  2. 著作物の発行年号
  3. 著作権 所有者の氏名

ですね!

 

詳しく知りたい方は、Wikipediaさんも参考にしてみてください。

 

万国著作権条約に基づく著作権表示には、次の3つの表示が必要である。

  • c(丸の中にC、丸C、マルシー)の記号 (symbol c)
  • 著作権者の氏名 (name of the copyright proprietor)
  • 最初の発行の年 (the year of first publication)

順序は定められておらず、この順序でなくてもいい。慣習的に「c」を最初に書くことが多いが、氏名と年の順序はさまざまである。

 

著作権表示 - Wikipedia

 

年号と 氏名の順序はさまざま~って書いてありますが、一般的に多いのは『年号 → 氏名』の順ですね!


転載したい部分は「引用」して紹介する

蛇足ですが、webサイトを見ていて、自分のサイトで紹介したいなぁ~って思うことってありますよね?そんな時は「引用」として紹介する方法があります。

 

自分のものとして記載するのは著作権違反になりますが、著作元を明らかにすることで権利の侵害を防ぐことができるのです。

 

下のような感じの紹介の仕方なら、このサイトを作った方も悪い気はしないですよね!

 

テレビ番組などにも著作権があるのに、それを録画しても著作権に違反しているとは言われませんよね?

 

これは、個人的に楽しむ事を目的とする場合などに限り許されています。

 

しかし録画したテレビ番組などを、最近話題の動画共有サイトなどで誰でも観覧できる状態にすることは、個人で楽しむ枠を超えていますので、著作権法違反になります。

 

他人の作品を利用する場合は、正しいルールを守って作者の権利を侵害しないよう心掛けてください。

 

[コピーライトとは?]Copyrightの意味を知ろう!

 

 色々とややこしいこともいっぱいありますが、みんなが気持ちよく過ごせるようにそれぞれがマナーを守って、快適なネットライフを過ごせるようにしましょう!