SSLサーバ証明書が無効化されるとどうなるのか？ 「https://〜」が「http://」になるだけじゃないの？と思うなかれ。7月24日にリリースされた「Google Chrome」の最新安定版v68.0.3440.75で、すべてのHTTP接続サイトが“安全でない”サイト扱いになったことが話題になりましたよね（参考：HTTP接続サイトは“安全でない”サイト扱いに ～「Google Chrome 68」が正式公開 – 窓の杜）。 この“安全でない”状態でSSLサーバ証明書が無効化されてしまうと、ブラウザの警告表示によって、以下のようにサイトの閲覧ができなくなってしまうというのです！これは対応せざるを得ませんね…。 さくらインターネットの場合 さくらインターネットでは、以下の2つの場合において、SSLサーバ証明書の再発行の対象となります。 対象１：2016年5月31日以前に発行されたSSLサ

1. Font-familyの選定「Font-familyメーカー」 Windows・Mac・iOSの標準フォントの一覧が見れて、ドラッグ＆ドロップで自分で組み合わせて好きなFont-fammilyが作れるWebサービスです！ 全部に共通してインストールされてるのはどれだろうとか、このOSではこっちのフォントで代用しよう…なんてあれこれ考えながらFont-familyを考えることができます。 有名サイトで使われているFont-familyが見れたり、特にこだわりが無い時はサルワカさんの「おすすめ」が見れたりと、かゆいところに手が届く便利サイト！ Font-familyメーカー：標準フォント一覧からサクッと指定 2. 画像の縦横比計算「web計。」 昔からお世話になってる縦横比を計算してくれるWebサービス。サムネイルのサイズを計算する時など、本当に時短になって助かってます。黄金比や白銀比、

錯視とは 視覚調整について知る前に、まず「錯視」とはどういうものかについて触れておこうと思います。 先述したように、錯視とは端的に言ってしまえば「目の錯覚」のことです。人間の視覚は必ずしも正確ではありません。目で受け取った情報を、脳が勝手に推測したり補完することにより、しばしば実際の姿とは違うように見えてしまうことがあります。 例えば有名なものに「ミュラー・リヤー錯視」があります。以下の2本の矢印の横棒はふたつとも同じ長さですが、下の横棒の方が明らかに短く感じられるのではないでしょうか？ 上記の錯視についての解釈はいくつかあるらしいですが、どれも無意識に矢印の斜め線も含めて長さを測ってしまうためだったり、「下の矢印の方が遠くにある」と認識するためだったりと、受け取った情報を脳が自動的に補完してしまうことが原因とされています。 このように、たとえデザイン上のふたつの要素が全く同じ大きさや色で

参考にした素敵なニュースレターいろいろ 私は今まで美容院に行った時に「ニュースレター」というものを渡されたことがなかったため、作成前にニュースレターとは何ぞやということを知る必要がありました。色々な美容院のニュースレターの事例を見ることで、デザイン時にずいぶん参考になりました。 2018年7月23日　追記 以下で紹介しているニュースレターは私が参考にさせていただいたもので、私が制作したものではありません。私が制作したニュースレターは記事の最後尾に掲載しています！ 美容室アリレイナ こちらの美容室では、実際に店に行かなくてもサイト上で今までのニュースレターを読むことができます！レイアウトが細かく仕切られているため、もしかしたら実際に渡す時は小さく折りたたんでいるのかもしれません。しかも毎回季節に合わせてデザインされているので、もらう度に嬉しい気持ちになりますね。 「美容室アリレイナ」さんのニ

シームレスにしたい画像を探す まずはシームレスにしたい画像を用意しましょう！シームレスである必要がないとなると、探す段階から選択範囲がグッと広がるんですよねー！ 今回はこの紙のテクスチャを使います！ 私がよく素材探しでお世話になっているのは、たくさんのテクスチャを配布してくださっている「フリーテクスチャ素材館」。高画質のテクスチャ素材があるので助かっています。素材の中にはもともとシームレスのパターン素材もありますよ！ 画像をPhotoshopでシームレスパターンにする シームレスにしたい場所を選んで正方形に切り抜き 画像の中からシームレスにしたい場所を選びます。テクスチャの中には陰影が濃いところと薄いところがあったりして色ムラがあるので、私はなるべく色あいが均等な場所を選んでいます。 今回は500pxのパターン素材を作りたいので、場所が決まったら「切り抜きツール」で画像を正方形に切り抜きま

春はあけぼの、夏は夜…とくれば、「秋は夕暮れ」ですよね〜！というわけで、今回は夕空と紅葉がテーマのデザインです。11月いっぱいまで公開する予定です！今回もPC版しか作っていないので、スマホの方はPC版表示にして確認してみてくださいね〜！ 参考になる！美しい秋のデザインいろいろ 秋デザインを制作する時に参考になるWebサイトやポスター、グラフィックデザインなどを集めてみました！ 極彩の秋 紅葉の東部カナダ ファーストビューの写真が美しい「エア・カナダ」のプロモーションサイト。やっぱり秋デザインのキーワードといえば「紅葉」ですよね。赤・黄色・緑・茶色など様々な色を楽しめる紅葉は秋デザインには必須ともいえるモチーフなのかもしれません。それにしてもカナダでもこんなに美しい紅葉が見られるんですね！行ってみたい。 エア・カナダ【日本】カナダ・オンタリオ州、ケベック州とその近郊情報サイト「極彩の秋 紅葉

レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th

数年前までのゲーム関連サイト（国内） Flashを多用し、スマホ対応はされていなかった 少し前までは国内のゲーム関連のサイトはFlashを多く使い、派手なデザインが多かったように思います。個人的にはゲームの楽しさや世界観を伝えるのに「動き」はとても重要な役割を果たすと思うので、Flashの多用も仕方がないのかなと考えていました。 表示速度は遅くなりますが、今見てもFlashの動きをふんだんに活用して制作したサイトの世界観は圧巻だと思います。また、この時点ではスマホ対応されているサイトはそんなに多くありません。 ジョジョの奇妙な冒険 オールスターバトル アーシャのアトリエ?黄昏の大地の錬金術士? テラリア Flash離れが叫ばれてきている最近では、以前はFlashで表現していた動きのエフェクトも、違った技術で表現されるようになりました。また、スマホでの閲覧率も数年前より格段にアップし、スマホ

ブックマークレットとは？ ブックマークレットとは、一言で言えばブラウザにWebサイトへのリンクではなく“機能”をブックマークしておくもの」です。ブラウザに登録するところまでは一緒なのですが、そのブックマークレットをクリックすることで様々な機能を使えるようになります。 「拡張機能やアドオン使えばいーじゃん！」という考えもあるのですが、拡張機能やアドオンは結構PCのメモリを消費してしまうのですよね…。なので、ちょっとしたことをするならばブックマークレットを使ったほうがPCのメモリの節約になるのでオススメです！ サイト運用・分析に使えるブックマークレット あらゆるSNSでの反響がすぐに分かる！「ソーシャルてんこ盛り」 まずは私が１番お世話になっているブックマークレットである「ソーシャルてんこ盛り」。これ1つで気になるページのSNSでの反響をいっぺんに知ることができます！また、このブックマークレッ

テーマは藤と桜！ 春ということで、藤と桜をテーマにデザインしました！スマホ版は作っていないので、PC版で見てくださいねー！ お気に入りはactywayのあくちー(@actywav)さんが作成した桜のプラグイン！このテーマでは桜の花びらの色を変えて藤の花びらとして使用しています。藤の花が上から降ってくるイメージ。 サイトに桜を降らせることができるあくちーさんのスクリプトはこちらで配布しています！あくちーさん素敵なスクリプトをありがとうございます〜！ サムネイルサイズ変更にあたりPHPでデザインを切り替えて表示 テーマ変更にあたり、サムネイルのサイズを大きくしました。そうすると、サムネイルまわりのデザインも変わってしまうんですよね…。画像が以前より小さくなる分にはサムネイルを切り出して再生成すれば済む話なんですが、大きくするとなるとそうはいきません。途中からPHPでデザインを切り替える必要が発

【原因】公式サイトで生成したSNSシェアボタンのコードをそのままループ内にベタ貼りしていた 例えば、Twitterの公式SNSボタンの設置コードって、公式サイトでコードを生成すると以下のような形式になっていますよね。 <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.

また、以前に書いた「Any.do」の記事はこちらです。併せてどうぞ！ おすすめタスク管理ツール「Any.do」を紹介！リマインド機能やスマホとの連携が便利 | Design Color 以前に書いた「Any.do」の記事 ブラウザの開きすぎにご用心！「The Marvellous Suspender」 追記 以前は「The Great Suspender」を紹介していましたが、マルウェアが含まれているとして、Chrome ウェブストアから拡張機能が削除されてしまったため、代替の拡張機能である「The Marvellous Suspender」を紹介しています。 作業中、調べ物などをしていてついついブラウザを開きすぎてしまい、PCが重くなってしまった経験ありませんか？このプラグインを入れておけばアクティブでないタブを停止状態にすることができます。 停止までになる時間を「5分」「15分」「30

もくじ Chromeプラグインでタスク管理 iPhone/Androidアプリでタスク管理 Macアプリでタスク管理 ブラウザ上でタスク管理 Chromeプラグインでタスク管理 頼まれごとをされたらその場でサッと入力！ 最も私の生活で活躍しているのがこのChromeプラグインの「Any.do」。アイコンをクリックすれば、タスクが時系列/プロジェクト順に並びます！タスクの入力や終了もとってもカンタン。 私は会社で期限のある頼まれごとをされたら、すぐにその場で「タスク内容」と「期限」を入力することにしています。そうすれば、仮に「頼まれたこと自体を忘れた」ということがあったとしても後で思い出せますからね！ また、リマインド機能もバッチリついているため、タスクをこなす時間に別のことに気をとられていたとしても、画面に表示されるのですぐに気づくことができます。 Gmailとの連携もできる！ さらに便利

色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま

もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ：cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました！ありがとうございます！特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ

シンボリックリンクとは まず、シンボリックリンクとは何でしょう。 あるファイルやディレクトリに別の名前を与え、ユーザやアプリケーションがその名前をファイル本体と同様に扱えるようにする仕組み。 引用：シンボリックリンクとは 【 symbolic link 】 – 意味/解説/説明/定義 ： IT用語辞典 ざっくり言うとショートカットのようなものなのですが、最も決定的な違いはシンボリックリンクは「実体」として扱えるという点ですかね。使いどころとしては例えば以下のような場合が挙げられます。 Dropbox上のデータをXAMPPなどのローカルサーバーで確認したい ローカルのファイルをDropboxで他の人に共有したい 先述したように、Dropboxにある元ファイルをXAMPP上で確認したい場合、シンボリックリンクを作成すればDropboxでファイル更新があってもXAMPP上のファイルも連動して更新

もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし

個人的に「探しやすい」と思うギャラリーサイトの特徴 ギャラリーサイトでWebデザインを探していた時、「次へ」ボタンを何回もクリックするのが面倒で、スクロールするだけでページが次々と読み込まれる「無限スクロール」の存在にとても助けられました。 個人的に、以下の3ステップのみで素早く目的のサイトに到達できる構造が好みです。 スクロールする サムネイルをクリックする 新しいウィンドウで該当ページが開く 次からは上記をすべて満たした私のおすすめギャラリーサイト10選をご紹介！ straightline bookmark ダークなデザインがかっこいい「straightline bookmark」。ここが１番お世話になっているかもしれません。「tags list」からすぐにお目当てのデザインを検索できます。１番のお気に入りは「レイアウト」で絞り込めること。サムネイルの表示サイズを変更できるのも便利。

長年贋作だと思われていた絵が本物のゴッホ作「モンマジュールの夕暮れ」だと判明！ なんと！長年「贋作だ」と思われていた絵が実は本物のゴッホ作「モンマジュールの夕暮れ」だったことが発覚したそうです！1906年に贋作だと判断され以降ずっと屋根裏部屋に眠り続けていたそうなので、かれこれ100年以上眠り続けていたことになりますね。うわあああ！ しかも、描かれた時期はあの有名な「ひまわり」と同時期とのこと。「ひまわり」はゴーギャンと一緒に暮らした「黄色い家」に飾る目的で制作された絵です。アルルで芸術家共同体を作ろうと燃えていた頃ですね。ゴッホの制作活動が最も充実していた時期ではないでしょうか。その時期の作品が新たに発見されるなんて、とても嬉しいニュースです！

「PNG Hat」導入まで プロダクトの有効化 拡張機能の配布サイト「madeby source」から「プロダクトの有効化」を行います。「madeby source」のアカウントが必要なようですね。 新たにアカウントを作成することもできますが、「Facebook」「Twitter」「GitHub」のうちどれかのアカウントを持っていればそのままログイン出来ます。 その後、自分のメールアドレスを入力すると、プロダクトを有効化することができます。 ダウンロード・インストール 下記のボタンをクリックして拡張機能をダウンロードしたら、ダブルクリックしてインストーラを立ち上げます。 インストーラが起動したら、もう一度ダブルクリックしてPhotoshopにプラグインをインストール。その後、Photoshopを再起動したら、準備完了です！ Photoshopで拡張機能「Png Hat」を使ってみよう！ P