基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。

コ・デザインのためのシンキングシート

Anycloud Inc.COO ex-SAGOJO Inc. COO マーケのコンサル→プログラミング独学して起業。 プログラミング、データ分析、デジタルマーケディングなどが得意。 学校講師、プロボクサーもたまに。

※この記事は、2015年4月15日に公開された記事を再編集したものです。 世の中には、物事を美しく魅せるための「比率」が存在します。 建築や、Webデザイン、通常のデザインなど「なんだか綺麗」と思わせなけらばいけない場面で利用されるこれらの比率。具体的には黄金比、白銀比、青銅比、白金比、第二黄金比など、利用される比率は複数存在します。 そこで今回は、その中でもよく使われる黄金比・白銀比を簡単に、自動で計算してくれる便利なサービスを5つ選んでみました。 黄金比とは 黄金比とは、「Golden Ratio」の日本語訳で、1：1.618という人間にとって最も安定し、美しく感じられる比率のことです。 正方形の一辺にその約60％分の長方形を足した時、自然とバランスが取れていると感じることができます。名刺などの縦横比もほぼ黄金比で構成されており、有名なものをあげると、パルテノン神殿、モナ・リザ、ミロの

サイトのコンバージョンとリードを最適化することは、ビジネスにおける最高の投資のうちの一つだ。 滞りなく運営され、コンバージョンを生み出すウェブサイトは、いざと言うときビジネスの助けになる。 しかしこれは簡単ではない。コンバージョンは勝手に生じるわけではないのだ。 ありがたいことにGoogleは、サイトが欠いている、あるいは苦労していることに取り組む助けとなる無料のツールを用意している。 例えば、Googleのサーチコンソールがある。 これはGoogleの視点からあなたのサイトを診断するのにはもってこいのツールだ。 しかし使いかたは複雑で、サイトの改善アクションにつながるアドバイスが得られないこともある。 たくさんのデータと情報のセットがあるが、現状の分析データを改善するステップはない。 そして売上と収益を上げ続けるためには、サイトを改善し続けなければならない。 私は個人的にサイトを直すため

Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を

Chromeの拡張機能「Edit This Cookie」を使うと、クッキー情報を参照するだけでなく、 変更することもできます。 1)「Edit This Cookie」をインストールするためにChromeウェブストアに行きます。 https://chrome.google.com/webstore/category/apps 2)「Edit This Cookie」と検索すると、下記の拡張機能が出てきます。 3)「＋CHROMEに追加」ボタンをクリックします。 4) 参照したいWebサイトを表示させておいて、「Edit This Cookie」のアイコンを クリックします。 表示しているWebサイトのクッキー情報が表示されます。 ここでは、クッキー情報の削除や変更ができます。 変更したい場合は、「値」を変更後、「Cookieの変更を適用」をクリックします。

While funding for Italian startups has been growing, the country still ranks eighth in Europe by VC investment, according to Dealroom. Newly created Italian Founders Fund (IFF) hopes to help…

SEO流入増。オンラインで商談・問い合わせ増加を達成。 1,700社が導入したコンテンツマーケ・オウンドメディア・ SEO対策分析サービス

Sorry, JavaScript is required to view Global Stats charts.

友人に教えてもらってからちょっと使って、結構感動したのでここでもシェア〜！どっかでシェアした事があると思うんですが、PingendoというBootstrapを使ったプロトタイプがめちゃめちゃ速攻で作れるアプリとして昔からあったんですが、それがいつの間にかめっちゃ使いやすくなっていたので、ここでも共有させて貰えればと思います。 Pingendo自体でサイトを作るというより、あくまでもプロトタイプの段階でのサイトレイアウトをぱぱっと作る上では結構使える場面もあるんじゃないかと思うので、是非一度使ってみるのも良いかと思いますー！ それでは行ってみましょう！ とりあえずサイトからアプリをダウンロード Mac版と、Win版、それからLinux版とあるみたいですね。とりあえず、Macから見てるので、Mac版で見てみようと思います。っていうか、Boostrap4っていつになるんだろ。 テンプレートを選択

Freehand – The all-in-one collaborative workspaceUnlock your team’s full potential – ideate, plan, execute, and track projects with Freehand There is something so natural about collaborating in Freehand. It feels like you’re holding a marker, and making ideas happen. I can’t imagine doing that in another tool. It captures that human essence of being in person and talking to someone that is right n

コードを書かずに、本物のようなアプリを再現できる 簡単３ステップで、動くプロトタイプをすぐに作成できます。Web・iOS・Androidはもちろん、カスタムサイズでもお作りいただけます。 プロトタイプ作成機能 ワイヤーフレーム機能

アプリの世界では普通ですが、ウェブでもユーザの操作に対してちょっとした反応を返したり、システムの状況を提示する「マイクロインタラクション 」がますます重要になってきそうです。ユーザがスマホやアプリの操作に出てくるマイクロ・インタラクションに慣れてくると、無意識のうちにそういった動作をウェブにも求めるようになると思います。 下のGIFアニメはBetterTouchToolのウェブサイト で使われているマイクロインタラクションの例ですが、このようなちょっとした動作がウェブサイトの印象を変えたりしますよね。 数値化は難しい領域ですが、たとえば競合サイトとの差別化のために相対的なユーザ体験を高める施策の一つとして有効に活用できそうです。クライアントに「こんなのできませんか？」と聞かれる機会も増える気がしています。 そして、ウェブ制作においてもマイクロインタラクションの実装が増えると、今度は、それら

Webディレクターは、開発作業のスケジュールコントロール、エンジニアとのコミュニケーション、さまざまな競合サイトの調査、Webサイトの効果調査など日々多くの業務に追われています。 Webブラウザとしては一番のシェアを誇る「Chrome」には、アドオンと呼ばれるモジュールソフトウェアによってさまざまな機能を追加できる仕組みがあるのですが、アドオンの中には多忙なWebディレクターの業務を手助けしてくれるようなものも多く、日々の業務で使いたいところ。 ディレクターにオススメ拡張機能8選 以下では、Webディレクターの作業効率アップを実現するオススメ拡張機能を紹介します。ぜひ参考にしてみてください。 1. Google Quick Scroll https://chrome.google.com/webstore/detail/google-quick-scroll/okanipcmceoeeml

Web系のエンジニアであれば開発ツールとしてブラウザをハードに使っているのではないでしょうか。日々使うツールだからこそ、自分の好みにカスタマイズしたいという方も多いはず。 本記事では、最もブラウザでシェアを誇るGoogle Chromeの拡張機能についてまとめました。開発業務を効率化するためにも、便利な拡張機能は大いに利用していきましょう。 このニュースを読んだあなたにオススメ Facebookをさらに便利に！オススメのChrome拡張機能12選 作業効率がアップ！オススメのChrome拡張機能20選 誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法 必携の拡張機能4つ まずは、SEやディレクターなど、エンジニア向けの拡張機能からご紹介しましょう。 1. Tag Assistant https://chrome.google.com/webstore/deta

URLを入力するだけで、様々なデバイスでの表示確認ができます。 今までも様々なリサイザーサービスがありましたが、デザイン的には一番好みかなと。使いやすさも抜群です。 Google公式の表示確認ツール「Resizer」 Googleが新たにリリースしたサービス「Resizer」は、スマートフォン・タブレット・PC各種でのWebページの見え方を一覧できるサービス。 URLを入力するだけで各種デバイスでの表示確認がサクッとできてしまいます。 表示された画面の中では操作も可能。スクロールもできますし、クリックしてページ遷移することも可能です。アコーディオンなどの動きも確認OK。 右上のアイコンをクリックすれば、PC・スマートフォン（タブレット）に絞って表示確認ができます。 画面上のナビゲーションからウインドウサイズを変更することも可能です。各種数字がウインドウサイズを表しています。 表示確認がはか