せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノクロでも大丈夫か、色数は多すぎないかなどを検証できる無料オンラインツールを紹介します。
GoogleではWebフォントを無料で公開しています。サイズが大きくなりがちなWebフォントをGoogleが高速なCDNで配信し、さらに多数のWebサイトで共有することでキャッシュも有効になります。 日本語フォントはあまり多くありませんが、多少のフォントは対応しているようです。そんなWebフォントでの表示をまとめて確認できるのがFontCDNです。 FontCDNの使い方 トップページです。多数のフォントでのプレビューが表示されています。 日本語で表示を指定した場合。 表示をタイルからリストにした場合。 使い方も分かります。 FontCDNはGoogleのWebフォントでの表示をまとめて確認することで、細かな違いも一目で分かります。フォントをカテゴリや名前でフィルタリングできるので、使いたいフォントに合わせて確認するのが容易です。 FontCDNはJavaScript製のオープンソース・ソ
ハリケーンや台風の様子を衛星画像でほぼリアルタイムにチェックできるウェブサイトが「Zoom Earth」です。Zoom EarthはGOESやひまわり8号、Meteosatといった気象衛星からのライブ衛星画像、NASAのGIBSやEOSDISから画像データ、MicrosoftのBing Maps PlatformやEsriから地図データ、National Hurricane Center・Joint Typhoon Warning Center・IBTrACSといったサービスから台風情報を得て作成されています。 Zoom Earth – ライブ衛星画像を見る https://zoom.earth/ Zoom Earthはこんな感じで、ほぼリアルタイムの衛星画像をチェックできるウェブサイトです。 画面左上には表示している衛星画像が撮影された日時および、特定の場所を検索するためのサーチバー。
Webページをさまざまなデバイスのサイズで表示を同時確認できるブラウザベースのオンラインツールを紹介します。 完全無料で利用でき、登録など面倒なことは一切不要です。 everysize everysizeの特徴 everysizeの使い方 everysizeの特徴 everysizeは、レスポンシブに対応したWebページの表示確認をできるオンラインツールです。さまざまなデバイスのサイズで同時に確認でき、拡大縮小、レイアウト変更にも対応しています。 ブラウザベースのオンラインツールなので、OSを問わず利用できます。 Chrome, Safari, Edgeは問題なし、IE11はダメでした。
こんにちは!トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました! 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル+タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー
バージョン管理の肝と言えるのが差分表示でしょう。何か誤った更新があっても確認ができて、必要に応じて差し戻すこともできます。多くの場合、上下または左右に並べて比較できるようになっています。 今回はその新しい表示方式としてGit Historyを紹介します。ビジュアル的に優れた格好良い差分ビューワーです。 Git Historyの使い方 Git HistoryはGitHub上のファイルを開いた状態で、github.comをgithub.githistory.xyzにすると差分表示になります(公開されているファイルの場合)。その表示は以下のようになります。 上に出ているコミッターを切り替えると、アニメーションしながらその時のコードになります。 実際に試しているところです。 Git Historyは細かく見比べるときには使いづらいですが、雰囲気としてどれくらい変わったかを把握するには十分です。ある
2018年9月にGoogle Fontsは日本語が正式にサポートされ、既に利用されている人、検討されている人も多いと思います。当ブログでも早期アクセスから使用しています。 日本語の正式サポートに伴い、Google Fontsを使用したさまざまなツールも日本語が利用できるようになりました。 自分のWebサイトやブログに、Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールを紹介します。 参考: Google Fonts + 日本語 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語の使い方 Google Fonts + 日本語でどのように表示されるかテスト Google Fonts + 日本語を使用するとどのように表示されるか試すことができるオンラインツールはこちら、Fontyです。 登録
svg画像表示ツールを作りました。 1.はじめに SVG画像はXMLで作成され、フォーマットのひとつとして次のように、symbol要素にid属性を付与する方法があります。 <svg> <symbol id="foo" viewBox="0 0 110 110"> <path d="..."></path> </symbol> <symbol id="bar" viewBox="0 0 110 110"> <path d="..."></path> </symbol> </svg> この場合、下記のようにuse要素でid属性を呼び出せば対応するsymbol要素に記述されたsvg画像が表示されます。 <svg title="test" role="img"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sample.s
また観光情報のデータベース「観光予報プラットフォーム」と連携し、観光地の基礎情報、混雑情報や、外国人向けのサービス情報なども提供中。今後は、ユーザーの写真投稿機能なども追加予定とのことで、今後ますます楽しみな国産フォトストックサイトのひとつと言えるでしょう。 宮城県 気仙沼港 内湾 Miyagi Inner Bay, Kesennuma Port, METI, CC BY 4.0 International 福島県 さざえ堂 Fukushima Sazae-do Hall, METI, CC BY 4.0 International 福島県 国宝 白水阿弥陀堂 Fukushima Shiramizu Amida-do Hall (National Treasure), METI, CC BY 4.0 International 沖縄県 名蔵湾 Okinawa Nagura Bay, MET
スマホ・タブレットの縦向き・横向き、ノートブック・デスクトップなど、さまざまなデバイスでのページの見え方をさくっと確認できる便利なオンラインサービスを紹介します。 デバイスごとのモックアップにも使えるレベルですよ! Responsive View 使い方は簡単、登録など面倒なことも一切不要です。 ページにアクセスし、「Enter your URL」に表示したいページのURLを入力します。 ※「https://」には対応していません(2016年2月現在)。
私のツイート数は53万です さて、Twitterの仕様変更に伴いこれまで表示されていたシェア数が消えてしまってがっくり来ていたのですが、digitiminimi Inc. / ディジティ・ミニミ様が提供しているWEBサービスwidgetoon.js & count.jsoonにて表示させることができるようになりました。実装方法をご紹介。 今回の記事はこちらの記事の追記的な感じです。 widgetoon.js & count.jsoonの登録 まずはwidgetoon.js & count.jsoon | digitiminimiへ行ってAPIが使用できるように登録します。 といってもサイトのURLとメールアドレスを入力してするだけ。総ツイート数によって取得の時間は変動しますが、私の場合は1日経ったら終わってました。 こんな感じでツイート数の取得が完了! SNS Count Cacheプラグ
Web負荷分散システムを提供するCloudFlareが2015年6月に発表された通信プロトコルHTTPの新バージョン「HTTP/2」のサポートを開始しました。HTTP/2はSPDYを改良しパフォーマンスを上げたものですが、CloudFlareを利用すればさらに高速でウェブサイトの表示が可能になります。 CloudFlare HTTP/2 | CloudFlare | The web performance & security company https://www.cloudflare.com/http2/ 各地に分散されたキャッシュサーバーを介してアクセスすることでウェブサーバーの負担を軽減させるCloudFlareは、サービスが無料であることと、「CloudFlareアカウント作成」「DNSレコード入力」「CloudFlareのネームサーバー名をウェブサーバーに登録」というステップで
ウェブサイトにTwitterのタイムラインを表示させる方法を紹介します。 1.はじめに ウェブサイトを運営している場合、TwitterやFacebookと連動させていることがあると思います。 ここではTwitterのユーザーウィジェットを利用して、ウェブサイトにTwitterのタイムラインを表示させる方法を紹介します。 2.Twitterのタイムラインを表示させる Twitterのユーザーウィジェット作成ページにアクセスします。 Twitterのユーザーウィジェット作成ページ 「ユーザータイムライン」タブの設定項目に必要な事項を入力します。 ユーザー名:表示させたいユーザー名を入力 オプション取引:@ツイートを除外する場合や画像を自動的に開く場合にチェック 高さ:タイムラインの高さを入力 テーマ:「明るい」「暗い」から選択 リンクの色:タイムラインに表示されるリンクの色を入力 カスタマイズ
Test up to three fonts You can choose a Google Font or a Websafe font from the list, write the exact name of a System Font or Upload a custom font file. It's a tool to test and analyze webfonts that you intend to use in your websites or projects. You can compare fonts from different sources (Google Fonts, System Fonts or any font file downloaded from internet), analyze their x-height, weights, cha
▲HOME あなたの情報(確認くん) 情報を取得した時間 2023年 09月 24日 AM 02 時 19分 23秒 現在接続している場所(Server) www.ugtop.com あなたのIPアドレス(IPv4) 133.242.243.6 ゲートウェイの名前 (none) OSの解像度 現在のブラウザー HatenaBookmark/4.0 (Hatena::Bookmark; Analyzer) 表示サイズ: どこのURLから来たか (none) Proxyのバージョン等 (none) Proxyのステータス (none) / (none) / (none) Proxyの効果 (none) MIMEの仕様 */* FORMの情報 GET FCONTENTのタイプ (none) FORMの送信バイト数 (none) データ取得の手段 (none) クッキー (none) エンコードの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く