画像化されたwebデザインをブラウザで表示確認することができるツールを作成しました。

みなさま、こんにちは。

今回は、画像化されたwebデザインをブラウザで表示確認することができるツールを作成しました。

画像化されたwebデザインをブラウザで確認するツール

▽ 過去に作成したツールーーーーー

アスペクト比計算ツール

スマホで簡単にソース表示するツール

ーーーーーーーーーーーーーーー▽

web制作会社からもらったwebデザインがいまいちピンとこない

webデザイン会社からもらったデザイン画像を印刷してみたけれどもなんだかピンとこない。

そんなことを感じたことはありませんか？

webデザインって紙に印刷すると急にメリハリがなくってしまうんですよね。

動画やアニメーションが伝わらないのは仕方ないけれど、紙にしたせいで魅力が伝わらなくなってしまうのは、web制作者、依頼者ともにもったいない。

そう思ったので、画像化されたwebデザインをブラウザで表示確認することができるツールを作成しました。

さあ、使ってみてください

画像化されたwebデザインをブラウザで確認するツール

画像化されたwebデザインをブラウザで確認するツール

上記のような手順で使用してください。

スマホをクリックすれば、横幅375pxになりますので、スマホデザインのシミュレーションできると思います。

厳密にこれ通りになるわけではありません。

しかし雰囲気は伝わると思いますので、ぜひ使ってみてください。

制作の苦悩

Javascriptのみで構築しました

今回は、スキルアップとしてjQueryを使わずに、Javascriptのみで構築しました。

そのせいか（実力がないだけだが）コードが長く、複雑になっていました。

どこで綺麗にするのでご容赦ください。

当然案件ではjQueryなどできることを駆使し、最もいいサービスを作成しますが、自己商品は常にスキルアップを狙い、提供サービスに還元できるように目指していきます。

そもそもこんなツール必要なのか？

今回作成するうえで、この考えが頭の中をぐるぐる回っていました。

「chromeに画像をドラッグすれば少なくとも似たような感じになるのでは？」なんて誰も言わないでください。

今回、Javascriptで挑んだことも難しかったですが、サービスのアイデアを作り出すことの難しさも実感しました。