ブログBLOG

CSSでフォームをレスポンシブ【カンタン！サンプルソース有】

いまやスマートホンを持っていない人はいないくらい、携帯端末が普及しました。 とは言いつつも、ホームページのフォームはまだパソコンの画面幅にしか対応していないサイトもちらほらと見かけます。 モバイル表示に対応するのはハードルが高いように感じるかもしれませんが、意外にも簡単です。 今回 ...

【最新版＊2020年度にむけて】Webデザイン参考サイトまとめ【WEBサイト/レスポンシブ/LP/バナー】

もうすぐオリンピック開催年の2020年！最新のWebデザイン参考サイトをサイト、レスポンシブ、ランディングページ、バナー別にまとめてみました。 参考サイト自体が最新デザインであったり、使いやすい・見やすいサイトを厳選しました。 これからのデザイントレンドをチェックするのに是非ご活用くださ ...

ワイヤーフレーム(画面設計)の作り方～Webディレクター必見～

ワイヤーフレームとは別称「画面設計」と呼ばれるもので、Webサイト制作の工程の中で一番初めに作成されるものです。ビジュアル的には簡素ですが、非常に重要な工程です。 ワイヤーフレームを作成せずそのままデザインを起こしていく場合もありますが、その際もデザイナーの頭の中ではワイヤーの設計レベルの ...

ホームページリニューアルに失敗しないためのポイントや進め方について解説！

新しいデバイスの開発や通信の発達、急速なスマートフォンの普及で５年前に作ったサイトでも古く感じてしまうホームページ。今や会社の情報発信源、顔として必須のホームページも物理的な看板のようにリニューアルをする必要がありますよね。 「そろそろ自社のホームページをリニューアルしたいなぁ」と思った理由はな ...

【厳選10個】サイト制作の現場から厳選！すぐに活躍するchromeプラグインまとめ【全部無料】

みなさんはブラウザのプラグインを使っていますか？YouTubeの広告をブロックしてくれるものや、YouTubeの再生速度を変えてくれるプラグインなどは便利ですよね。 今回はYouTubeのプラグインの話ではなく、「Webサイト制作で役に立つ」Google Chromeプラグインについてご紹 ...

日付入力フォームをinput type=”date”でカスタマイズ【IEにも対応】

  「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか？ HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟 ...

【WP】「All in One SEO」プラグインのカスタマイズまとめ（title,description,keyword,canonicalのカスタマイズ）

WordPressでサイトを構築する際に、TDK（title, description, keyword）の設定を行う上でとても便利なプラグイン「All in One SEO」というものがあります。 自動で適切なdescriptionにしてくれたり、SNS向けのmeta情報を出力してくれたりし ...

デザイン通りに近づけたい！文字に関するCSSプロパティ総まとめ

これひとつで印象がガラリと変わる、デザインの要（と言っても過言ではないかも？）。 それが文字ではないでしょうか。 特に日本語は漢字・ひらがな・カタカナ・アルファベットに数字と、いろいろな印象の文字が並んでいるので、デザイナーさんの苦労もわかるような気がします。 今回は、コーディ ...

脱初心者！駆け出しコーダーがつまづきがちなポイントを解説してみた【デザイナーも必見】

突然ですが、あなたはコーダーですか？それともWebデザイナー？ そして、あなたはどのくらいコーディングに自信があるでしょうか？ え？「自分デザイナーなんでコーディングとか関係ないし！」という人、ちょっと待って！ まだ「戻る」ボタンを押さないでください！！ コーディングとデ ...

時短！Photoshopのアクション&ドロップレットで大量のPSDファイルを一括で処理しよう！

WEB制作に限らず「複数のデータに一括で同じ効果を適用したい！」という場面があると思います。 Photoshopのドロップレットを使えば、アクションで作成した機能をドラッグ&ドロップのみで簡単に実行できます。 [toc heading_levels="2"] 「アクション」と「 ...