WordPressの投稿でSVG画像を使えるようにしても、OGPやTwitter Cardsで対応してなかった件 – Rriver
WordPressの投稿でSVG画像を使えるようにしても、OGPやTwitter Cardsで対応してなかった件 イメージオプティム でPNG画像を最適化すると、やたらと時間がかかるなぁと思ってTwitterでつぶやいたら「さっさとSVGに行けと言う啓示なのでは？笑」というコメントをいただきました（笑）。最近このブログに使う画像はSVGに最適なイラストが多いですし、ファイルサイズを小さくできて高解像度のディスプレーにも対応できるので確かにメリットがありそうです。 そこで早速WordPressの投稿にSVG画像をアップしようと思ったんですが。。。メディアアップローダーでは以下のようなメッセージが出てきてアップさせてもらえませんでした。デフォルトではサポートされてないんですね。ちょっと驚きました。 ということで、今回はWordPressの投稿でSVGを使うために必要なカスタマイズや関連する設定
もう、レスポンシブでいいんじゃない？
先月末、藤井さん の働く株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけど、そのころからウェブ制作のデフォルトはとりあえずレスポンシブでいいんじゃない？と思っていたのですが、最近、その思いがより強くなっています。職場のウェブサイトをレスポンシブでリニューアルしてから約5年が経ちますが、やっぱり、あの時レスポンシブを選択しておいてよかったとつくづく感じています。おかげで、Googleさんがモバイルインデックスを優先するという昨今のニュース にもあまり翻弄されなくてすんでいます
Flexboxの仕様って勧告に至ってないけど使っていいの？迷ったのでW3Cの仕様策定プロセスを読んでみた
Flexboxの仕様って勧告に至ってないけど使っていいの？迷ったのでW3Cの仕様策定プロセスを読んでみた この記事の公開時（2016年2月21日）の時点で、Flexboxの仕様のステータスは「W3C Last Call Working Draft 」で、プロセスの第一段階の草案の次のステップでW3Cの承認・推奨を得ていない状態です。このステータスで、これから数年使いたい基盤となるフレームワークなどにFlexboxを使っていいのか？ちょっと迷うところです。 ブラウザサポート は充実してきてますし、Foundation 6 やBootstrap 4（β2 α版） などの主要フレームワークでも採用され始めているし、よっぽどのことがない限り問題はなさそうです。でも、仕様のステータスはちょっと気になります。 そこで、そもそもW3Cの仕様策定プロセス（Development Process）がどんなも
Macの再生ボタンが使えなくなったと思ったらGoogle Play Musicのせいだった
El Capitanにアップデートしたころに、うちのMacBook ProのiTunesで再生ボタンが使えなくなっているのに気付きました。なので、てっきりEl Capitanのせいかと思っていたら、Chromeに入れたGoogle Play Musicの拡張機能が原因でした。 iTunesで再生ボタンや「前の曲」「次の曲」ボタンが使えなくなったなぁと思ったらチェックしてみてください。 メニューの「ウィンドウ」 > 「拡張機能」から拡張機能画面を開いて一番下までスクロールすると「キーボードショートカット」というリンクがあって設定が可能です。 以下はGoogle Play Musicのキーボードショートカットを削除した状態。再設定しようと思ったらできなくなっちゃいました。いらないんですけど。。。 2015年10月21日に公開され、2017年2月25日に更新された記事です。 About the
もう不毛なコピペ作業はこりごり。3年ごとのリニューアル・サイクルから抜け出す方法はないですか？
10年以上ひとつの組織のウェブサイトを運営してきて、4回ほど全面的なリニューアルを経験しています。リニューアルのたびに数千ページものHTMLを書き直すという作業をやってきました。その不毛とも思えるコピペ作業に、そろそろ終止符を打ちたいと考えています。 でも、どうすればそれを実現できるのか？ 解決策はまだないんですけど、問題解決の第一歩は課題を明確にすることだと信じてます。とりあえず、いまの悩みを整理して打開策の手がかりにしたいと思います。技術も進歩してますし、5年、10年先に不毛な作業をしなくて済むように、今のうちに準備しておきたいと思ってます。 同じ悩みを抱えている方の何かの役に立てば幸いです。ていうか、すでに解決されてる方がいたら、ぜひご教授いただきたい。。。 全面的なリニューアルの目的とは？ 「全面的なリニューアルなんて意味ないのでは？」という声が聞こえてきそうです。 僕もそう思いま
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
Appleがトップページで自動送りカルーセルをやめた理由
残念ながらページ全体のキャプチャをとっていなかったので下までお見せできませんが、ページのメイン要素となるカルーセルの下にはフッターしかありませんでした。ほんとですw そして、おぉ、さすがApple。 ここでも思い切った選択をしたな〜と思っていたわけです。 ところが！ 数日後にもう一度トップページを見てみたら、あの懐かしの4つのボックスが戻っているではないですか！？ 実は、このレイアウト（巨大ヒーローイメージと4つのフィーチャーボックス）が、何年も続いたAppleの鉄板レイアウトだったわけですが、先日のリニューアルでこのフィーチャーボックスがなくなっていて「ついに、あれもお亡くなりになられたか」と、密かに悲しんでおりました。 その後のこの華麗なカムバックです。 かなり興奮してしまいました。 しかも、スタイルも細かいスペースや背景の扱いがよりシンプルなものに更新されています。 iPadでみると
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由
レスポンシブWebデザイン（RWD）で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いた本でもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要？」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び気になったので自分の考えをまとめてみました。 モバイル版ブラウザの「デスクトップ表示」機能 たとえばDolphinやChromeといったモバイル向けブラウザにはデスクトップ版を表示するための機能が用意されています（FirefoxやMobile Operaにもついてるそうです）。わざわざこういうった機能が装備されているということは、これがユーザに求められる機能だからだと思います。（以下はiPhone
「レスポンシブWebデザインで変わるワークフロー」のプレゼン資料をアップしました
上にスライドが表示されない場合はこちらからご覧ください。 3月9日に行われたSwapSkills Doubbble09 「マルチデバイス時代の新常識 レスポンシブWebデザインの今と未来」という勉強会で「レスポンシブWebデザインで変わるワークフロー」という題名でお話をさせていただきました。プレゼン資料の公開のお許しが出たのでシェアします。プレゼン資料だけだと分かりづらい部分もあるかと思いますが、少しでもなにかのお役に立てば幸いです。 また、関連する内容で、このブログの記事でぜひ読んでいただきたいものをご紹介しておきます： レスポンシブWebの時代だからこそ見直すべき、3つの「ウェブの哲学」 レスポンシブWebデザインは臨機応変に使うのが良い レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理
レスポンシブな時代に必要なWebディレクターの7つの心得
先日、僕の恩師のウェブ制作会社で開催された勉強会で「レスポンシブWebデザインのワークフロー」についてお話させていただいたんですが、その際に「意思決定層との密なコミュニケーションをとり、スムーズに開発を進めていくために、苦労した点や工夫した点」について質問をいただきました。その回答をまとめたので、このブログでも共有したいと思います。今回まとめたものはレスポンシブWebデザインでの制作に特化した内容ではないですが、以下に挙げるようなWebディレクターとしての基礎知識やスキルが、レスポンシブWebデザインのような柔軟な対応を強いられる制作では大切になると感じています。 Question: 意思決定層との密なコミュニケーションをとり、スムーズに開発を進めていくために、苦労した点や工夫した点を教えてください。 Answer: どれもディレクターとして基本的な内容になりますが、僕は以下のようなことを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
さすが、Apple！刷新されたウェブサイトで見つけた3つのこだわりとは？