Webbiz

Webサイト制作やビジネス・デザインに関する備忘録的ブログです。

【動画】日本という国をおもしろおかしく描く「Japan - The Strange Country」

面白い動画を見つけたのでご紹介。ビジュアル自体は可愛いデザインですが、色々と考えさせられる動画です。日本は実に色々な問題を抱えていますね。

Japan - The Strange Country (Japanese ver.) from Kenichi on Vimeo.

死んだあとどうする?自身の死後に関するFacebookの2つの設定

f:id:Webbiz:20160208001558p:plain

あまり考えたくありませんが、誰しも死はいつしか訪れます。50年後かもしれないし、もしかしたら明日かもしれません。もし仮に明日、交通事故で帰らぬ人となったとしてもSNSのアカウントは生前と同じように、世界中の人々の目に晒され続けるのです。そこでFacebbokでは死後に関する2つの選択肢を用意しています。あなたならどちらの選択肢を選びますか?

「追悼アカウント」か「アカウントの削除」

f:id:Webbiz:20160208002350p:plain

Facebookには「追悼アカウント」と「アカウントの削除」という2つの選択肢があり、生前に自身の死後のアカウントの扱われ方を設定することができます。

「右上の▼」→「設定」→「セキュリティ」→「追悼アカウント管理人」

管理人を指定し、代わりに管理してもらえる「追悼アカウント」

あなたの訃報がFacebookに報告されると、あなたのアカウントは「追悼アカウント」という扱いになります。あなたは、その時に自分の「追悼アカウント」を管理してくれる人物をあらかじめ指定することができます。「追悼アカウント管理人」の欄でFacebook上の任意のユーザを選択することであなたに変わって管理してくれる人物を指定可能です。尚、追悼アカウント管理人は次の事ができます。

  • あなたのプロフィールに投稿を書いて固定する(亡くなった方に代わって最後のメッセージをシェアする、追悼サービスについての情報を提供するなど)
  • 新たな友達リクエストに対応する(アカウント所有者が亡くなる前にFacebookの利用を始めていなかった友人や家族など)
  • プロフィール写真やカバー写真を更新する

ただし、追悼アカウント管理人は以下のことはできません。

  • あなたのアカウントに直接ログインする
  • あなたの過去の投稿を削除・変更する
  • あなたが他の人に送ったメッセージを読む
  • あなたの友達を削除する

あくまで、あなたのアカウントの一部を操作する権限を与えられただけで、直接アカウントへはログインはできません。

すべての情報を削除する「アカウント削除」

インターネット上に何も情報を残したくないという方は、「アカウント削除」をお選びください。あなたの訃報が報告され次第、アカウントに紐付けされた情報は全て削除されます。

尚、存命の方へ対しイタズラ目的で追悼アカウントの申請をした場合は「偽証罪」に問われるとのことですので、くれぐれもご注意ください。

参考URL:

追悼アカウントのリクエスト | Facebook

私が死んだ場合、アカウントはどうなりますか。 | Facebookヘルプセンター | Facebook

追悼アカウント管理人とは何ですか。 | Facebookヘルプセンター | Facebook

クラウドファンディング「Makuake」がオモシロイ。

特にクラウドファンディングを探していたわけではないけれど、たまたま辿り着いた「Makuake」が面白かった。

f:id:Webbiz:20160205002526p:plain

https://www.makuake.com/

今までも「CAMPFIRE」や「READYFOR」なんかも気になって見たりはしたけど、僕には合わなかった。もともとプロダクトやデザインが好きなので人が集まってなんかやるだけのプロジェクトや謎のアーティストの支援なんかけっこうどうでも良かったりする。「Makuake」はプロダクトやサービスのプロジェクトが結構多いので眺めているだけでも楽しいです。

f:id:Webbiz:20160205002538p:plain

こんなのだったり

f:id:Webbiz:20160205003731p:plain

こんなのだったり。

「なんか面白いことしたいな」って思ったときや、頭が凝り固まったりしたときにも覗いています。僕も頑張ろう。

アイコンwebフォント「Font Awesome」が便利すぎて、楽しい!

webサイト上でアイコンを使いたいとき、みなさんはどんな方法で表現しますか?私はもっぱらアイコンwebフォントの「Font Awesome」を使用しています。

設置が簡単で楽しいので、アイコンを必要以上に使ってしまい、結果アイコンだらけの微妙なデザインになるという失敗を数多く経験しております。そしてそれは現在進行形です。今回は、そんな「Font Awesome」の基本的な使い方をご紹介します。

f:id:Webbiz:20151127225512p:plain

https://fortawesome.github.io/Font-Awesome/

1:必要ファイルを準備する

「Font Awesome」を使用する方法は、ファイルをダウンロード後、自分のサーバにアップロードして使用する方法とCDNを使用する方法の2とおりです。

ファイルをダウンロードして使用する場合

まずはトップページの「download」ボタンから必要データ一式をダウンロードします。

f:id:Webbiz:20151127232139p:plain

ダウンロードしたデータのうちフォントファイルとCSSファイルをそれぞれ任意のフォルダにコピーしてください。サイトのhead要素内には以下のコードを記述します。

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

※"path/to/font-awesome/"部分はサイトに合わせて変更してください。。

CDNを使用する場合

サイトのhead要素内に、以下のコードを記述

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

2:アイコンを表示させる

htmlファイルのアイコン表示させたい部分に記述を加えます。アイコンによってクラスが異なるので、「Font Awesome」のサイトからコピー&ペーストで持ってくるのが便利かと思います。

f:id:Webbiz:20151127232210p:plain

f:id:Webbiz:20151127233021p:plain

f:id:Webbiz:20151127232359p:plain

トップページ>icons>各アイコンページにコードが有ります。

3:カスタマイズ!

あとはCSSで色や大きさ・マージンなどをお好みに調整してください。

設置が簡単で楽しいですが、アイコンの使いすぎには十分ご注意ください。それでは、楽しいアイコンライフを。

ウェブアクセシビリティを確保するために、押さえるべき10個の原則

f:id:Webbiz:20151126232504j:plain

「ウェブアクセシビリティ」はやさしさのかたまり

ウェブアクセシビリティとは、簡単に言うと「より多くの利用者が、より多くの場面で、より多くの使い方を選べるようにすること」です。すなわち、どんな利用者にとっても使いやすいサイトにする「やさしさ」のかたまりなのです。加齢などによって視力・聴力・操作力が低下している利用者、たまたまマウスの調子が悪い利用者、今日に限ってメガネを忘れてしまった利用者、などウェブサイト利用者の環境は様々です。そして、携帯・スマートフォンタブレット・ゲーム機など閲覧デバイスの種類も多くなってきています。文字の大きさに配慮をしたり、マウスを使わなくてもキーボードだけで操作できるようにしたり、スクリーンリーダー(音声読み上げソフト)に対応するなど、様々な環境の利用者が情報を入手できるようにしてあげる、という「優しさ・配慮」がウェブアクセシビリティの根本です。

ではウェブサイトをアクセシブルにするには具体的にどうしたらよいのでしょうか。なんだか難しそう・・・特別なことするのでしょ?と躊躇してしまう方もいるかもしれません。しかし、アクセシビリティを確保するためにはウェブサイトの基本とも言えるたった10個の基本原則を押さえるだけで実現ができるのです。

アクセシビリティを実現するための基本10原則

 1:バリデートエラーをなくす

開始タグ・終了タグが正しく記述されている、重複したID属性がないなど、バリデートエラーがないことを確認しましょう。

ツールを使うと簡単にチェックできます。

バリデートエラーがないことでスクリーンリーダー(音声読み上げソフト)が正しく解釈できるようになり、Googleページランククローラーも正しくソースコードを解釈できるようになります。SEOの観点からも重要になってきます。

W3C Markup Validation Service

2:見出し要素(h1~h6)やリスト要素(ul,ol,dl)を意味に基づいて正しくマークアップする

コンテンツの意味や構造を、プログラム(障がい者支援ツールGoogleの検索クローラーなど)が解釈しやすくなります。

見出しにはh1~h6の要素を使って適切にマークアップしましょう。主題や目的を説明している内容であることが重要です。

文章が箇条書きであれば、プログラムも箇条書きであることを理解できるようにul、ol、dl要素を使って適切にマークアップしましょう。

3:テーブル要素は見出しをth要素にして正しくマークアップする

データテーブルを使用する際、表題はcaption要素、見出しはth要素など、正しくtable要素を用いるようにしましょう。スクリーンリーダー(音声読み上げソフト)が文書構造を解釈できるようになります。

また、レイアウトテーブル(見た目を整えるだけのテーブル)を用いる際は、データテーブルの要素・属性を使用すると、スクリーンリーダー(音声読み上げソフト)が誤った解釈してしまう恐れがあるため、table要素、tr要素、td要素だけでマークアップをして、caption要素、summary属性を使用しないようにしましょう。

4:ページタイトルは、ページの内容がわかるように記述

ページタイトル(head内のtitle要素)は前後の文脈がなくても、ページタイトルだけで意味が分かるように主題・目的を説明した内容にしましょう。利用者がいま、どのページにいるのか判断することにも役立ちます。またSEOの視点から考えると、検索してほしいキーワードを含めるとよりよいでしょう。

利用者がコンテンツを見つけやすく、現在位置を確認しやすくなります。

5:画像には代替テキストを提供

画像(img要素)にはalt属性で代替テキストを提供してあげましょう。盲目の利用者もスクリーンリーダー(音声読み上げソフト)で代替テキストの情報を入手できるようになります。

地図画像などalt属性の説明が難しい場合、画像の近くにテキストの説明を提供しましょう。また、装飾だけを目的にした画像はalt属性を空にして記述しないようにしましょう。

6:リンクテキストは、リンク先が分かるように記述

可能な限り、リンクテキストだけでリンク先が分かるように記述しましょう。利用者がリンク先を見ただけで何があるか判断することができます。また、SEOの観点からもリンクテキストだけでリンク先が分かるようにするとGoogleの検索クローラーがリンク先について解釈しやすくなります。

7:色のコントラストを確保して文字を見やすくする

色を認識しづらい利用者は、コントラストを確保できていないと文字が読めない場合があります。文字色と背景色のコントラストを確保することでより多くの利用者に対して文字を読みやすくすることができます。 コントラスト比が確保できているかどうかツールを使ってチェックすることができます。

カラー・コントラスト・アナライザー(無料)

8:label要素を用いて、フォームとラベルを関連づける

label要素を用いて、フォームとラベルを関連付けましょう。関連性がわかることでスクリーンリーダー(音声読み上げソフト)が解釈できるようになり、盲目の利用者はフォーム入力がしやすくなります。必須項目であること、入力例や入力方法も合わせて記述して、入力エラー時はダイアログで通知してあげるとより親切でしょう。

9:キーボードだけで操作できるようにする

マウスが使えずキーボードのみを使用して操作している利用者もいます。そのため、キーボードだけでマウスと同じように操作できるようにする必要があります。

なんだか難しいことをするように思うかもしれませんが、a要素、input要素、select要素、button要素などHTMLの標準要素を使用していれば問題ありません。イベントハンドラを使用する際はマウス向けとキーボード向けの両方を併用するようにしましょう。

10:予測不可能な動作を引き起こさない

ウェブサイトを開いたとたん、突然動画が再生される、突然ポップアップが開くなど、事前に予測出来ないような動作を引き起こさないようにしましょう。盲目の利用者は動画や音の止め方がわからず、突然予測できない動作が起きると混乱をする可能性があります。動画は利用者がクリックして初めて再生されること、または事前に説明テキストを記述して、状況が変化することを予測できるようにしましょう。

「なんだこんなことか」と思った方もいるかもしれません。ウェブサイトをアクセシブルにするための技術はWeb制作における基本中の基本となることがほとんどです。10の基本原則を実践することで最低限のアクセシビリティを確保できるでしょう。すぐに実践できることばかりなので是非試してみてください。

【高品質でカッコいい】無料でホームページが作れるサービス4選

マイナーなものを含めると無料でホームページが作れるサービス自体はたくさんありますが、サービスが終わってしまっては元も子もありません。ある程度知名度がありユーザ数も多く、且つクオリティの高いサービスを4つほどご紹介します。

Wix

f:id:Webbiz:20151125232139p:plain

f:id:Webbiz:20151126002535p:plain

http://ja.wix.com/

【特徴】

・ユーザ数は7000万人以上

HTML5のお洒落なテンプレートが豊富

・ページの編集はドラッグ&ドロップで簡単

・フォームや予約システムなどをプラグインで追加できる

ECサイト(ネットショップ)も作成可能

・レスポンシブ対応

・24時間サポート

SEO対策済

Jimdo(ジンドゥー)

f:id:Webbiz:20151125233800p:plain

f:id:Webbiz:20151126002553p:plain

http://jp.jimdo.com/

【特徴】

・クリック&タイプの直感操作でカンタン編集

スマホアプリ(Android & iOS)で簡単更新

・170種類以上の豊富なデザインテンプレート

・本格ネットショップも簡単作成

・有料プランなら、独自ドメインやメールも使用可能

Goope(グーペ)

f:id:Webbiz:20151125234819p:plain

f:id:Webbiz:20151126002605p:plain

http://goope.jp/

【特徴】

・ネット予約機能を追加可能

・レスポンシブデザインテンプレート

ECサイト(ネットショップ)も作成可能

独自ドメイン対応

・スライドショーをかんたん設置

・登録するだけのフォトアルバム

・お知らせもすぐに登録&公開可能

・カレンダーで予定公開

・オリジナルクーポン作成

Wepage

f:id:Webbiz:20151125235923p:plain

f:id:Webbiz:20151126002616p:plain

https://wepage.com/

【特徴】

・作成はかんたん3ステップ

・一つのサイトをみんなで編集できる同時編集機能

・マルチデバイス対応

・限定公開機能

・見たまま編集で誰でも簡単に編集可能

・豊富なプリセットデザイン

・リッチコンテンツでダイナミックな動きを実現

・お問合せフォームを作成可能

twitterFacebookなどのソーシャルバーを簡単設置

・画像編集機能

 

今回は4つほどご紹介しましたが、いかがでしたでしょうか。どれも簡単な操作で今風なお洒落なサイトが作れちゃいます。Webデザイナーが要らなくなる時代もそう遠くないのかもしれません。

【ヤフオク!】出品時の落札システム利用料が2/16から引き上げ

f:id:Webbiz:20151124000413j:plain

ちょっと前にヤフオクからアナウンスがありましたが、出品時の落札システム利用料が上がるみたいですね。簡単に言うと、

・落札システム利用料:5.40%(税込)→8.64%(税込)

・対象範囲:落札金額が1000円以上(※)→625円以上(※)

※対象範囲以下は54円で固定徴収

となるらしいです。今は落札金額の5.4%がシステム利用料として抜かれていますが、それが8.64%まで引き上げられるらしいです。さらに、今までは1000円以上の落札が対象だったものが、625円以上のものはすべて8.64%の手数料が発生するみたいです。これは出品者にしてみれば大幅な負担増ですね。適用時期は「2016年2月16日(火)午前0時以降に終了したオークションより」とのこと。

いまはフリマのサービスがあったり、ECサイトも割りと簡単に作れるのでみんなそっちにシフトしていくんだろうな。私もヤフオクは辞める予定です。