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サービス。サムネイルのサイズを計算する時など、本当に時短になって助かってます。黄金比や白銀比、

私のPCのスペック 私の使用しているiMacのスペックです。2013年のモデルですが、買ったのは2015年くらいだったと思いますので、OSはYosemiteでした。買ってすぐに新しいモデルが出ちゃったパターンですかね…。 モデル：iMac Late 2013 画面サイズ：21.5インチ CPU：2.7GHzクアッドコアIntel Core i5プロセッサ メモリ：8GB（4GB x 2） ストレージ：1TB（5,400rpm）ハードドライブ グラフィックス：Intel Iris Pro 1536 MB Appleからではなくヨドバシカメラのオンラインストアで購入したので、何もカスタマイズされていない標準モデルといったところ。 恥ずかしながら、MacはおろかPCのスペックというものに対して全く知識がない自分は、「そんなに大した作業をするわけじゃないし、カスタマイズしなくてもきっと大丈夫」とい

1. 使用フォント・サイズを決める いざ資料を印刷してみた時に、「なんだか読みづらい」と感じる資料だと商談相手に読んでもらえないかもしれませんよね。手に取った時にきちんと内容が伝わるよう、適切なフォントや文字サイズを知っておきましょう。 基本的にはゴシック体を使用する 明朝体は可読性（長い間読んでいても疲れにくい「読みやすさ」のこと）が高いフォントと言われていますが、媒体資料の場合は疲れが生じるほど長文になることはほぼありません。であれば、視認性（パッと見ただけでも認識できる「見やすさ」のこと）の高いゴシック体を使うのがベターです。 とは言っても、必ずしも明朝体を使うのがNGということでもありません。例えば、「BLOGOS」の媒体資料では、見出しや短いテキストに明朝体が用いられており、それによって媒体の洗練された雰囲気が強く印象づけられています。 基本的には資料にはゴシック体を用いたほうが

1.色々な媒体資料を見て研究する 「どんな媒体資料にしたいか」というイメージが固まっていないと、いざ作り始める時につまづいてしまいますよね。そのため、まず私は色々なメディアの媒体資料を見て研究することからスタートしました。 「どんな形式で作られているのか？」「自社メディアをどんな言葉で表現しているのか？」「アクセス数はどれくらいか？」「広告メニューや料金の見せ方は？」など様々な疑問を頭に浮かべながら、とにかくたくさんの媒体資料を見まくりました。 色々なメディアの媒体資料を見ることで、それぞれの事例が学べるだけでなく、自社メディアとの違いも浮き彫りになるため、自然とイメージが湧いてきますよ！ 媒体資料まとめ記事 研究する過程で発見した素敵なデザインの媒体資料や、自分なりに参考になったポイントをまとめた記事を書きましたので、こちらも併せて読んでみてください！ また、以下の記事も非常に参考になり

錯視とは 視覚調整について知る前に、まず「錯視」とはどういうものかについて触れておこうと思います。 先述したように、錯視とは端的に言ってしまえば「目の錯覚」のことです。人間の視覚は必ずしも正確ではありません。目で受け取った情報を、脳が勝手に推測したり補完することにより、しばしば実際の姿とは違うように見えてしまうことがあります。 例えば有名なものに「ミュラー・リヤー錯視」があります。以下の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.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし