Facebookのタイムラインは年齢制限がある場合表示されない

pageplugin 表示されない

こんにちは!YOUKNOWです。

今回の記事はタイトルで全て語り尽くしてる記事となります。

この前お仕事でFacebookのタイムライン(Page Plugin)を埋め込んでいたサイトでFacebookのタイムラインが表示されないという事件が起きました。

そう、以前までは表示されていたのに…。

試しにデベロッパーツールで読み込むんでも全く表示されません。
なぜだろう…。と思い、色んなFacebookページで試してみると表示されるものと、表示されないものがありました。
色々試して気づいたのは、どうやらお酒など年齢制限があるFacebookページは表示されないようです。

よくある質問のコーナーにもバッチリ記述されていました。

埋め込み投稿と動画がサイト上に表示されないのはなぜですか。
埋め込むことができるのは、公開コンテンツのみです。投稿の内容になんらかのプライバシー制限が適用される場合は、埋め込みできません。これには、制限付きページによる投稿も含まれます。たとえば、ページに年齢制限がある場合、このページによる投稿を埋め込むことはできません。
コンテンツ内の特定の部分が埋め込み可能かどうかを簡単にテストするには、ブラウザの「シークレット」機能または「プライベート」機能を使用して読み込んでみてください。

アルコールなど年齢制限を扱うページでは、タイムラインの埋め込みは行わないほうが良いです(戒め)

その後すっかり空いてしまった所に、レイアウト変更が待っていたことはいうまでもありませんでした。
みなさまもお気をつけくださいませ…..。

現場からは以上です。

ウェブデザインの参考に!ウェブデザイナーがよく見るウェブデザインギャラリーサイトをまとめました!

ウェブデザインの参考に!よく見ているウェブデザインギャラリーサイトをまとめました!

こんにちは!YOUKNOWです。
新しくデザイナーになられた方も多いのではないでしょうか。おめでとうございます!

デザインの参考や、プレゼンで事例を出したい時。
ウェブデザインのギャラリーサイトを見ると思います。

今日は、ウェブデザイナーの僕が毎日見ている「ウェブデザインのギャラリーサイト」をまるっと紹介したいと思います。
海外のものも参考になるのですが、僕は日本のサイトを作ることがほとんどなので、日本語サイトをまとめているギャラリーサイトが中心になっています。
これらをぱらっと眺めるだけでも、よい刺激になります!

ではさっそく!!

縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

MUUUUU.ORG

まずは周りでも見ている人が多いMUUUUU.ORGさん!シンプルでオーソドックスなレイアウトのものが多くまとめられています。シンプルで綺麗なサイトを見つけたい場合はここで探すことが多いです。

オシャレなウェブサイトの参考デザインリンク集 | ウェブ・ファインダー

ウェブ・ファインダー

色んな分野を幅広く紹介しているのがこちらのウェブ・ファインダーさん

I/O 3000

io3000

こちらもシンプルでバランスが良いウェブサイトを中心に集められているI/O 3000さんです。

Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト

Responsive Web Design JP

レスポンシブデザインを探すならここ!

レスポンシブデザインは画像の画角や、デザインする上で気をつけなければいけないことが沢山。このResponsive Web Design JPPC・スマホ・タブレットの画面を一度に見ることができるなど、非常に見やすいサイトです。

WEBデザイン参考サイト bookma! v3

bookma!

他の所では取り上げられていないようなサイトも取り上げられているのがこのbookma!さん!
右上のプラスボタンからサイトを投稿することができ、投稿後、審査にパスしたものがこのbookmaに取り上げられています。不特定多数の人が投稿するために様々なサイトが集まるのだと思います。
個人的にびっくりしたのは閲覧数順にソートできること!

WebDesignClip

webdesignclip

ランディングページを探しているならここ!

ランディングページを造る仕事って意外と多いと思います。そんなとき参考にするサイトはこちらから探しています。

Awwwards – Website Awards – Best Web Design Trends

awwwards

こちらは世界中の素晴らしいサイトがまとめられており、採点式で特に優れたWEBサイトが表彰されているサイトです。
トップレベルのデザインやコーディングがなされたものが表彰されるので、是非見たほうが良い!と周りで評判のサイトです。

超オススメ!今年の目標はアプリ「Todoist」で決まり!

todosit

あけましておめでとうございます。本年もYouknow.jpをよろしくおねがいします。

今年の目標はタスク管理ツール「Todoist」で管理しよう!

1年の計は元旦にありということわざがあるように、元旦に今年の目標を決める人も多いと思います。
目標を作っただけで満足していては、せっかく作ったリストも意味がなくもったいないです。

そこで!タスク管理ツールTodoistに今年の目標を登録して、目標を達成していこう!という趣旨の記事です。
Todoistには今年の目標を達成することを助けてくれる、便利な機能が沢山揃っています!

Todoistとは?

Todoistとは「やることリスト」を登録しておける無料アプリで、仕事などよくタスク管理ツールとして使われる事が多いアプリです。
このTodoistに今年の目標を登録して、今年の目標を「やることリスト」にしてしまいましょう。

あとは登録した「やることリスト」つまり今年の目標を、Todoistが実現できるようにサポートしてくれます。

  • 目標の追加・整理が簡単
  • 目標に日時や習慣に便利な繰り返しの設定が出来る
  • やらなければいけない目標を知らせてくれる

特に便利なのが、習慣化したい目標を登録出来ることです。
「毎日スケッチ練習」と登録しておくと、スケッチ練習というタスクを毎日送ってくれるようになります。

1年 目標 todoist

僕はこんな感じで、整理・登録してみました。

Todoistのインストールは以下から行えます。

applegoogleplay

FREDRIK PACKERS 500D DAY PACKの売っている店舗

リュックサックをかおうと思い、ネット上で良い物がないか探していた所、
FREDRIK PACKERS(フレドリックバッカーズ)の500D DAY PACKを見つけました。

500D DAY PACK

FREDRIK PACKERSのバッグはとても有名らしく、芸能人の方もよく使われているそうです。
デザインもよく、ネットの画像を見て一目惚れしてしまった自分は、このバッグを探すことにしました。

インターネットで購入してしまってもいいけれど、実際に背負ってみるまではサイズ感とかがわからないので、実店舗でFREDRIK PACKERSの取り扱い店舗を探しました。

しかしなかなか実店舗で売っている所が見つからない…。
結局何駅も回ることになってついに見つけました!!

売っている場所は…

FREAK’S STORE 池袋パルコ店

500D DAY PACK 販売 店舗 池袋

池袋パルコの中にあるFREAK’S STOREにありました。

実際に見た500D DAY PACK の感想は、めちゃくちゃ良かったです。
デザインもいいし、あまり荷物を入れなくてもキレイな形を保っている所。

ただ、男性には少し小さすぎました。(涙)

同じようにFREDRIK PACKERSのバッグを探している方は、FREAK’S STOREの池袋店に行けばあると思います。
店員さんも親切で、背負った感じとかの印象とか、違うバッグを持ってきてくれたりで、とても印象が良かったです。

是非一度足を運んでみてくださいな。

一人暮らしに必要な1ヶ月分の費用

気づけば一人暮らしも4年目に..。
4月から一人暮らしで毎月どれくらいお金がかかるのか。不安な人もおおいはず。

今回の記事は、実際に4年間暮らしてみて、1カ月あたりどれくらいお金がかかったかをお伝えします。
一人暮らしをする時の参考にしてください。

なおこの記事は僕の専門学生時代をモデルに3年間の実体験の元、書かれています。

この記事に書かれている僕のプロフィール
20歳・男
住まい : 川崎(神奈川の東京より)

高校卒業後、上京したいという理由ではじめての一人暮らしをはじめる。
家事スキル無し。自制力無し。
資金繰りにおいて無事死亡。

一人暮らしで月にかかる費用 月額140,000円

一人暮らし 費用 一ヶ月

僕の場合、最低140,000円必要でした。
このラインを下回ると、日常生活で若干無理をして..ということが多かったです。

一人暮らしに必要な1ヶ月分の費用 内訳

家賃50,000円
食費35,000円
光熱費10,000円
通信費10,000円
定期代5,000円
交際費10,000円
消耗品10,000円
衣服・美容10,000円
合計140,000円

ひとつひとつ見ていきたいと思います。

家賃

家賃 一人暮らし 費用 一ヶ月

19平米・ワンルーム・川崎・風呂トイレ洗面台一緒・2F・軽鉄筋 (備考 : 部屋の形が三角形) で50,000円

家賃は場所にもよりますが月の固定費としては、おそらく1番大きいものになると思います。
そのため、物件選びで出来るだけ安い所を抑えておいたほうが、毎月の資金繰りはラクになります。

人によって値段が大きく違うポイントのため、家賃を自分の家賃の金額に置き換えると、
正確に毎月かかる金額をシミュレーション出来ます。

ちなみに、東京方面は家賃が高く、都内に住もうとすると70,000からになります。
上京をお考えの方は、東京へのアクセスが容易な近郊を狙うと良いと思います。

近郊でオススメなのは、「川崎」です。
今提示しているこの50,000円という家賃は神奈川の東京よりの所「川崎」に住んでいた頃の値段です。

川崎には東海道線が通っており、都内へのアクセスも素早く、
だいたいのことは、川崎だけで完結できてしまう、利便性の割に家賃も抑えめなかなり良いところです。
ちなみに川崎には、日本一の売上を誇るショッピングセンターがあったり、コストコ、IKEA等もあります。

川崎は治安が悪いと言われることもありますが、そんなことは感じたことないです。
不安な場合、隣の尻手に住むと良いと思います。利便性抜群の田舎みたいな感じの街です(笑)

食費

食費 一人暮らし 費用 一ヶ月

自炊のみ 35,000円

食費も人によってかなり左右されますが、自炊のみであれば35,000円で普通の食卓を囲むことが出来ます。
ちなみに、アルコールや、外食等を入れると4万〜5万ぐらいに跳ね上がります。。。

光熱費

光熱費 一人暮らし 費用 一ヶ月

ガス代(都市ガス)2,500円 + 水道代 1,500円 + 電気代 5,000円 + NHK 1,300円 = 10,300円 (約10,000円)

光熱費は人によってあまり変わらないと言われていますが、ガスの種類には注意してください。
ガスの種類はおおまかに分けて2種類あり、都市ガスと、プロパンガスに分かれます。

都市ガスは安いですが、プロパンガスはかなり値段が高いといわれており、2倍〜3倍ほどの値段をとられてしまうそうです。
参考 : プロパンガス(LP)ガスは都市ガスの料金の3倍で鬼高!違いを比較して引越しと新築を! 様より

プロパンガスのほうが火力が高いらしいですが、普通に暮らしていく上で火力が高いほうが良い場面は少ないと思うので、
特別な理由がなければ都市ガスの物件を選ぶと良いと思います。

通信費

通信費 一人暮らし 費用 一ヶ月

携帯キャリア(au) 6,000円 + 家用インターネット回線(Nuro光) 4,000円 = 10,000円

だいたいこんな感じです。

詳しい方は以下のサービスに乗り換えることで、大幅に節約が可能です。
特に携帯キャリアは、今流行のMVNOを利用することで、月々2,000〜3,000円くらいまで安く出来ると思います。 (注: MVNOは機械系に詳しい方のみにオススメ)

家用インターネットは、速度等を求めないのであれば、Wimax2を利用すれば月々3,000円くらいまで節約が可能だと思います。

定期代

交通費 定期 一人暮らし 費用 一ヶ月

4000円

勤務先や学校までの交通機関や距離によって大きく違います。都営は高い
僕の場合は4,000円でした。

交際費

交際費 一人暮らし 費用 一ヶ月

寂しい僕の場合 10,000円

大学生ともなると、酒ェ!スタバァ!飲み会ィ!彼女ォ!サークル活動ゥ!で大変らしいですね。
交際費50,000円とかかかるらしいですが、住んでる世界が違いすぎるので、
そういった方々にはぜひともアルバイトを頑張って欲しい次第でございます。

僕の場合そんなことなかったので、10,000円で十二分に事足りました。

消耗品

消耗品費 一人暮らし 費用 一ヶ月

10,000円

消耗品です。トイレットペーパーやらなにやらでもっていかれます。

衣服・美容

床屋 3,500円 + 洋服代 6,500円 = 10,000円

身だしなみを整えるための金額です。実際洋服ってもっと高いですよね。。
実際にはシーズンごとにまとめて買ってしまうのですが、ワンシーズン3カ月だと考えて 6,500×3=19,500円で、大体一ヶ月に直すと6,500円かな。といった感じの計算です。

意外とかかる1カ月の費用

こうしてみてみると以外とかかってしまいがちな、毎月の費用。
大学生だと教材代だとか、洋服代・趣味代等でもう少しかかってしまうのではないでしょうか。

一人暮らしを始める前にこれを参考に、実際に自分が1カ月いくらぐらいで生活出来るのかシュミレーションしてみるよ良いと思います。

「App Storeでエラーが発生しました。時間を置いてもう一度お試しください。(4) 」の解決方法

rename

Macでソフトをインストールしようと、Mac App Storeでアプリをインストールしようとしたところ、

App Storeでエラーが発生しました。
時間を置いてもう一度お試しください。(4)

とアラートが出て、インストールが出来ない事案が発生しました。

これが噂の、App Store エラー 4…!

解決策は、App Storeのメニューから[Store]>[サインアウト]で一度サインアウトし、もう一度ログインするだけで解決出来ました。

人によって解決方法は違うと思いますが、参考になれば幸いです。

【爆速】Photoshopで作る湯気の作り方

Photoshop 湯気 作り方

みるだけでよだれが滴るおいしい料理写真をつくるよ。

言うまでもないことだけどさ、おいしい料理といえば、あつあつ感。
あつあつ感に必要なのは湯気。
WEB業界的には「湯気つけときゃうまそうに見える」っていう都市伝説があるよ。

今回は料理写真をおいしく見せるために、Photoshopで作る湯気の作り方を紹介するよ。
さらに今回は、アクション機能を使って、2回目以降から文字通り一瞬で湯気がつけられるようにするよ。

今回の記事では、この見るからにおいしそうな画像に湯気をつけてこのように加工するよ。

Photoshop 湯気 作り方

この画像はゆん無料壁紙画像集様からお借りしています。ありがとうございます。

料理をおいしく見せる湯気の作り方

Step1.加工したい画像を開く

Photoshop 湯気 作り方

加工したい画像をPhotoshopで開きます。

Step2.湯気を作る

このStep2をアクションに保存しておくと、次回から一瞬で湯気を制作することが出来ます。
よく湯気をつける方はアクションに保存しておくと作業時間の短縮に繋がると思います。

1.新規レイヤーを作り、描画モードをスクリーンに

Photoshop 湯気 作り方

新規レイヤーを作り、描画モードをスクリーンに設定します。

2.描画色リセットする

Photoshop 湯気 作り方

ショートカットキーのDを押して、描画色を黒色に、背景色を白色にします。

3.新規レイヤーに対し、フィルター雲模様1を適応

Photoshop 湯気 作り方

先ほど作った新規レイヤーを選択し、上のメニューから[フィルター]>[描画]>[雲模様1]を選択し雲模様1を適用します。

Photoshop 湯気 作り方

適応が成功するとこのようになります。

黒色の上に白色の雲ができている場合、レイヤーの描画モードがスクリーンになっていない可能性があります。
また、まれに雲模様が適応されないことがありますので、その場合はPhotoshopを再起動してもう一度試してみてください。

4.雲模様1をゆらがせる

Photoshop 湯気 作り方

実際の湯気はゆらいでいるため、先ほどの雲模様1をゆらがせるために、[フィルター]>[変形]>[波形]を選択します。

値を画像のように設定し、OKを押します。
ここの値は、ある程度自由に調整しても大丈夫です。ここでは、波形:5 波長:最小100 最大400 振幅:最小10 最大80と設定しました。

5.完成

Photoshop 湯気 作り方

これで湯気レイヤーは完成しました。雲模様が揺らいでいる感じがわかると思います。
Step3でこの湯気を画像になじませていきます。

アクションに保存している方は、ここでアクションの保存を止めて下さい。
これでアクションを再生すると、一瞬で湯気レイヤーが作成されるはずです。

Step3.湯気を画像になじませる

1.なげなわツールを選択する

Photoshop 湯気 作り方

Lを押して、なげなわツールを選択します。

なげなわツールのぼかしを20pxに設定します。

2.湯気を出したい範囲をなげなわツールで選択する

Photoshop 湯気 作り方

こんな感じで湯気を出したい範囲をフリーハンドで選択します。今回はこんな感じに選択しました。

3.マスクをかけて、なじませる

Photoshop 湯気 作り方

湯気を出したい範囲を選択した状態で、画像の赤枠部分をクリックすると、選択範囲以外の湯気が消えます。

そのままだと、少し湯気が強すぎるので不透明度をいじって調整します。今回は50%の不透明度に設定しています。

完成

Photoshop 湯気 作り方

おつかれさまです!完成です。

湯気レイヤーをアクションに登録しておくと、実際に自分で行う作業が、なげなわツールを使って選択範囲を作り、マスクするだけになるので、かなりオススメです。

短時間で出来る上にかなりクオリティが高いので、個人的にずっと使っているテクニックです。是非試してみてください。

今年もよろしくお願いします

うー。さむさむ。

2016年1月18日。本日のダイヤは積雪の影響で乱れておりますが、今日も元気にやっております。

まずは、1月も半ばになりますが…あけましておめでとうございます。

今年はたくさん変化がありました。

身の回りの事も変化したし、ウェブ業界だとIEがさよならしたり…。(※さよなら出来るとは…)

せっかくなのでこの記事で2015年を振り返ろうと思います。

2015年のまとめ 個人

引っ越ししたり、入社したり。人生の分岐点を跨いだ感じがします。
自分の給料で全てを賄うほんとうの意味での一人暮らしが始まったのも今年。
個人的にコーヒーが飲めるようになったのは大きかったかも。。

テラスハウスにはまった

テラスハウス

th6tv.com様より

Netflixの無料体験でどんなもんかと思ってみてみたら、面白くてはまってしまいました。
他人とどう接したらいいのかが分からない時にでも!

家計簿をつけ始めました

自分がどれくらい出費しているのかを確認するために家計簿を始めました。
とはいえ、アナログで書いていくのは絶対に続かないと思ったので、マネーフォワードを使っています。

ちょっと悪い方にも変わったりした

いや、愚痴なんですが!
仕事上での人間関係がうまくいかず、仕事と結びついているもののモチベーションがすごく下がってしまってしまいました(笑)

なので、なんとか今年中に仕事関係のモチベーションを戻すのが目標です。

2015年のまとめ ブログ

ブログについては、2015年後半に更新ペースが失速したことが原因(?)で1日あたりのPVが低下してしまいました。

ここはちょっと反省点…。
更新を止めてもすぐに検索流入が減ることはなく、だいたい2カ月くらいはそのまま横這いの状態でした。

学んだことが多かったので、そのまとめが中心です。

初バズを体験

この記事で、人生初バズを体験!

ソーシャルシェアがぶわっと増えて、リアルタイムユーザー数が見たことない数字になりました!!
その時は嬉しすぎて、スクショちゃっちゃか、ちゃっちゃかとったりしてました。

バズのおかげで鳴かず飛ばずだったブログですが、そこから1日平均ユーザー数が増えていい流れができました。

他のブログでも言われていることですが、バズが起きたらまずその記事の終わりに、違う記事の紹介を入れること。
次に投稿する記事のクオリティを上げることが大事だと感じました。
いい流れを持続させるような、施策をすることがやっぱり大事だと学びました。

次のバズが来た時のために、準備をしておくのが良いかなと思います。

レビュー記事の依頼がきた

こんなに小さなブログでもありがたいことにレビュー記事の依頼がきました!

お話した感じ、重視されているのは、SNSのフォローワー数等だと感じることが出来ました。
結局、その時レビュー記事はお受けできませんでした。

大きな理由は以下の2つ が問題でした。

  • PVがすくないこと
  • ブログ用のSNSがないこと

レビュー記事を依頼されたい場合は、これを用意しておくと良いのかなと学びました。

人気のあった記事の傾向

2015年にYouknow.jpで人気だった記事を発表します。
お察しの通りここに上げる記事以外は泣かず飛ばずでした…。

どうせなのでそちらも紹介します(笑)
View数の少なさにふるえてください

いまみると、どうしてこんなの書いたんだろうって記事が多かったですw

1位. 文字レイアウトの参考になるポスター等 20選 9,202Views

2位. DreamweaverがCC 2015で神進化!もういらない子なんて言わせない! 7,791Views

3位. クオリティ高すぎ!大好きなモーショングラフィックス10選!6,030 Views

4位. 内定をもらうWEBデザイナー就活用ポートフォリオ製作方法 4,637 Views

5位. 【改訂版】就活用WEBデザイナー用紙ポートフォリオの作り方3,330 Views

以上は評価が良かった記事です。
この時期の記事は、タイトルをわかりやすくするように考えていて、タイトルに入れる単語も、goodkeywordさんを使いながら考えたのが良かったのかと。

記事のクオリティもほどよく、記事投稿のタイミングも考えたものが多いです。
4位5位のポートフォリオはもう少し早めに投稿するべきでしたが…。

ここからがお恥ずかしい、閲覧数やばい記事たちです。

_1位. 個人的日記 103Views

_2位. HTML5の最小構成 105Views

_3位. Finderのツールバーにショートカットを追加しよう! 109Views

_4位. 【折り返し】 HI株式会社 CHU様から20:57にお電話ありましたをラクにする 110Views

_5位 最近の個人的日記 113Views

ほんとに何も考えないで書いた記事が見事ランクインしてます。
1位・2位・5位の記事についてはコメントする必要はない感じですね…

4位・3位の記事は内容は個人的にいいと思っているのですが、タイトルがわかりにくすぎるのが問題でした。

4位・3位は便利だからみんなみてね!!!

まとめ

2015年の5月25日にはじまったこのブログですが、7カ月運営を続けることが出来ました。

ブログにお越しいただいている皆様のおかげです。ありがとうございます。
ときにメッセージをいただいたり、UBERを利用していただくなど嬉しい事も多く、非常に励みになっております。

また今年も、Youknow.jpをよろしくお願いします。

Photoshopでチョーク風にイラストやフォントを加工する

先日チョーク風なテイストで作る方法を調べて、色々試していました。

以外とベストなやり方を探るのに時間がかかったので、メモとして書き残しておきます。


やり方はとても簡単で、ダウンロードしたPSDの中にある、チョークセットのレイヤースタイルをチョーク風にしたいレイヤーにコピーするだけです。

色を変える場合はレンズフィルターで設定すれば色が変わります。

チョーク 加工 photoshop イラスト テキスト


チョーク風に加工するだけでも、かなり見栄えがよくなるので、画がしまらない時にお世話になります…(笑)
ほら世界地図だけなのに…以外と…

ライセンス的に商用利用も可能でとても助かるのでダウンロードしておくといざというときに助かるかもしれません!

新しいデザインのツイッターボタンPSDを配布します!


Twitter社がツイートボタンのデザインの変更を発表しました。

2015年11月20日までに変更を完了すると宣言した通り、現在ほとんどのツイートボタンが新しいデザインになっています。

新 デザイン ツイッター ボタン 素材 フリー


このように新しいツイートボタンのデザインは、以前よりフラットなテイストになり洗練された感じのデザインに仕上がっています。
ついでに以前あったカウント表示もなくなっています。

新しいツイッターボタンのPSD素材

新 デザイン ツイッター ボタン 素材 フリー

おそらく今後何度も使うことになるので、せっせと作りました。
全てシェイプで作ってあるので、拡大にも対応してます!文字数が増えてもあんしん!

せっかく作ったのでそのまま公開します!ご自由にご利用下さい。

ダウンロードはこちら

PSD内に入っている素材は5つあり、詳細はこちらです。

  • ツイートボタン
  • フォローボタン
  • ハッシュタグツイートボタン
  • リプライツイートボタン
  • 英語版ツイートボタン

この素材について
※ ツイートボタンを表示するデバイスによって見え方が違う為、イメージと若干異なる場合があります。
今回はChrome/Macの環境の見え方に合わせました。

※ 使用報告や、バックリンク等は必要ありません。
※ 再配布はご遠慮ください
※ この素材を利用して起こった問題についての責任は一切受けられません。