サイト紹介


06
「Googleウェブサイト翻訳ツール」を使ってWebサイトを簡単に多言語化 Webサイトを多言語化する際、Googleでは、自動翻訳ページがスパム扱いされる可能性を指摘しています。このことからも分かるように、できる限りは人の手によって管理された翻訳ページを用意することが ... 続きを読む⇒
02
企業やサービスのロゴを、クリック操作のみで簡単に作ることができるオンラインサービスをまとめてご紹介します。ここまで簡単に高品質なものが作れるようになったことはうれしいことです。
ブログや小規模な団体のロゴなどにもいいですね。 ダウンロードは無料ではありませんが、かなり安価に利用できるので、簡単にロゴを作りたいというときに利用してみてはいかがでしょうか。 続きを読む 続きを読む⇒
07
マテリアルデザイン仕様でサイトを構築したい、という方に向けたフレームワークをGoogleが無償公開しました。これらを読み込んで使うことで、マテリアルデザイン仕様として最適化されたサイトを手軽に作ることができます。素早くサイト制作ができるのはもちろん、モバイルフレンドリーなサイト制作にも活かすことができるのがうれしいですね。チェックしてみてはいかがでしょうか 続きを読む 続きを読む⇒
01
アプリを制作する上で参考にしたい、「マテリアルデザイン」。、実際にこれに基づいてアプリを制作する際にとても参考になるテンプレート集&無料素材集があります。マテリアルデザインのインスピレーションを得るには最適なサイトです。この中でも特に面白い素材をいくつかご紹介します。 続きを読む 続きを読む⇒
04
スライダーでパラメーター調節するだけで自分だけのオリジナルフォントを簡単に作れて、しかも無料でダウンロードできるオンラインサービス「metaflop」が便利です。「もう少し、ここがこうだったらいいのに」という細かな好みの違いで使えないとき、ぜひ試してみてください。 続きを読む 続きを読む⇒
03
サイトのイメージを大きく左右するのは、やはり画像。そこで、サイト制作に使える無料の画像素材サイトをご紹介します。 そこそこいいイメージを無料でというわけではなく、驚くほどクオリティが高く、素人では撮る・作ることができないような高品質な画像を提供しているサイトばかりです。 続きを読む 続きを読む⇒
01
左右にスライドするコンテンツを、更にクリックでズームして詳細にみせてくれる「Zoom Slider」。コーポレートサイト、ブランドサイト、ポートフォリオなど、多様な用途で使えそうです。ieは10から対応しています。その他のブラウザには全て対応。画像をスタイリッシュに見せたいときに、使ってみてはいかがでしょうか。 続きを読む 続きを読む⇒
04
HTML5やCSS3が発展を続けている今、Webデザインやアニメーションはますますダイナミックに進化しています。その変化を感じられる要素の一つがナビゲーションメニュー。もはやインデックスとしての役割でなく、サイトのテーマやデザイン全体に関わる重要なパーツになっています。 今回は、大胆で素敵なナビゲーションメニューを使った9つのサイトをご紹介します。 続きを読む 続きを読む⇒
01
昨年の11月にリリースされた「Firefox Developper Edition」。開発者のために作られた唯一のブラウザで、作成、テスト、サイズの変更など、Web開発を強力かつスピーディーに進める便利な機能が多数搭載されています。もちろん、全て無料で利用できます。 今回は、このブラウザが持つ9つの便利機能をご紹介します。 続きを読む 続きを読む⇒
05
ガーリー系デザインに最適な、花柄やパステルカラーを使ったシームレスなphotoshop用パターン素材をご紹介します。 続きを読む 続きを読む⇒
01
ブラウザやデスクトップを簡単に録画できるChromeの拡張機能「Screencastify」。アニメーションやマウス・カーソルの動きも動画として記録できます。今回はこの拡張機能の使い方をご紹介します。 続きを読む 続きを読む⇒
01
一定の型にはまりがちなWebデザインの中で、深い印象を与えることができるのが、手作りの感触がただようイラスト。あたたかい雰囲気を醸し出し、親近感や信頼感が増します。 今回は、メニューや背景など、メインとなるパーツに"Webらしくない”イラストを利用した印象的なサイトをご紹介します。 続きを読む 続きを読む⇒
01
HTML5と言えばリッチなアニメーションが特徴ですが、これを自作するとなると、JavaScriptの知識が必要です。初心者さんやデザイナーさんには苦手な方もいるかもしれません。 そこで便利なのが、「HTML5 Maker」。プログラミングは一切不要、図を描くような感覚で簡単にアニメーションを作成し、HTML5とJavaScriptで書き出してくれるので、そのままサイトに使うことができます。 続きを読む 続きを読む⇒
04
CSSだけで簡単実装!入力フォームのエフェクトをデザインする「Text Input Effect」に新バージョン追加 以前、「CSSだけで簡単実装!入力フォームの新しいエフェクト(149.docx)」で、入力フォームにフォーカスした時のCSSアニメーションを紹介しました ... 続きを読む⇒
01
どの企業もホームページを持つようになり、Web制作の需要が増える中、より短期間でローコストに開発を進めることが求められるようになっています。 そんな制作現場にとって非常に心強いのが、オープンソースの「Bootstrap」。 CSSフレームワークといわれるもので、ページにファイルを読み込むだけでレイアウトやボタン、ナビゲーションなどデザインされたスタイルを適用することができます。 今回は、Bootstrapの導入メリットと導入方法についてご紹介します。 続きを読む 続きを読む⇒
02
色を自動生成するライブラリ「Please.js」で、フォームのコントロールをカスタマイズ Please.js Please.jsは、色を自動生成するJavaScriptライブラリです。 上のページタイトルの「PLEASE.JS」を見ると、色がじんわりと変化しているのが分 ... 続きを読む⇒
03
クリックした時やマウスをのせた時のアニメーションがかっこいいと、それだけでもサイトの印象がぐっと引き締まります。 今回は、秀逸なアイデアで気持ちの良い動きを実現するCSS3のエフェクトを集めました。 続きを読む 続きを読む⇒
10
メンテナンスをしたいとき、リニューアルをしたい時など、一時的にサイトを「メンテナンス中」にできるプラグイン「WP Maintenance Mode」をご紹介します。 公開までのカウントダウンや、メンテナンス終了のお知らせ通知なども設定することができます 続きを読む 続きを読む⇒
06
HTML5とCSS3を駆使して設計されたサイトが増えてきました。 ユーザーの端末に柔軟に対応し、素早いレスポンスと美しいデザインから、最高のユーザーエクスペリエンスを提供しています。 今回は2015年のWebトレンドを感じさせてくれるサイトをご紹介します。 続きを読む 続きを読む⇒
16
窓ガラスに付いた水滴で文字を書いたような効果を作るチュートリアルがPhotoshopRoadmapで紹介されていました。ビデオチュートリアルですが、とても分かりやすくておすすめです。 続きを読む 続きを読む⇒
01
CSS3のアニメーションを利用したホバー効果やツールチップ表示が増えてきていますが、今回はモーダルウィンドウをアニメーションで表示させるスクリプト「animatedModal.js」をご紹介します。 横からのスライド、バウンド、フェードと多彩なアニメーションの数は約80種。 続きを読む 続きを読む⇒
01
バナーに必要なのは、整ったデザインではなく、目を惹き付ける、興味を湧かせるということ。ついついクリックしたくなるような効果を、画像や文字、色などで創り出すことです。 どのようなデザインが目を惹き付けるのでしょうか。いくつかのバナーを例に、ポイントを見てみましょう。 続きを読む 続きを読む⇒
03
今やどんなサイトにも設置されているSNSアイコン。 おしゃれな無料アイコンもたくさん配布されていますね。 でも、アイコンだけならスマートに収まるのですが、「tweetボタン」や「いいね!ボタン」など、シェアボタンまで並べだすと見た目にごちゃごちゃとしてデザイン性に欠けます。 そこで今回は、アイコンにシェアボタンを隠しておいて、マウスをあてたときだけポップアップで現れるjQueryのスクリプト「Social Media Sharing Bubbles」をご紹介します。 続きを読む 続きを読む⇒
11
WordPressのプラグイン「ContactForm7」では、名前や電話番号だけでなく、日付け・テキストエリア・ドロップダウン・チェックボックスなど様々な項目を処理することができます。 今回は、この項目の設定についてご紹介します。 続きを読む 続きを読む⇒
03
Webデザイナーの腕試しに!カーニングや色彩感覚をチェックする5つのゲーム 色彩感覚やセンス、余白の取り方など、Webデザイナーには様々なスキルや感覚が求められます。今回は、そんなスキルを気軽にチェックできるゲームをご紹介します。 ちょっとした息抜きに試してみてください ... 続きを読む⇒
02
CodePenに学ぶ!サイトに使える最新テクニック HTMLやCSS、JavaScriptを共有するコミュニティサイト「CodePen」。クリエイター達が毎日、数々の優れたソースを公開してくれています。その中から、すぐにサイトに活用できそうなテクニックをご紹介します。 ... 続きを読む⇒
09
CSSだけで簡単実装!入力フォームの新しいエフェクト Codropsで、入力フォームにフォーカスした時の、面白いエフェクトが紹介されていました。CSSトランジションやアニメーションを使い、様々なエフェクトを実現しています。 INSPIRATION FOR TEXT IN ... 続きを読む⇒
12
Googleカレンダー活用方法|タスク管理 ③タスク管理 GoogleカレンダーやGmailには、ToDoリストというものがあり、タスクの管理をすることができます。どちらのアプリからアクセスしても、リストは同じものです。ここでは、GoogleカレンダーからToDoリスト ... 続きを読む⇒
06
Googleカレンダーの活用方法をまとめました。その2 ②スケジュールの共有 Googleカレンダーは、スケジュール単位やカレンダー単位で他のユーザーと共有することができます。プロジェクトや部署ごとに共有し、メール通知などを利用すれば意思統一がはかりやすくなります。 1 ... 続きを読む⇒
05
Googleカレンダーの活用方法をまとめました ①基本的な使い方 Googleカレンダーは、スケジュール管理用のアプリです。個人だけでなく、複数のユーザーでスケジュールを共有できるので、企業でも使っているところは多いのではないでしょうか。 スマートフォンやタブレットなど ... 続きを読む⇒