サイト制作

slickの使い方からカスタマイズまで【スライダープラグイン決定版】
投稿日:2020年1月24日

「スライダーを実装したい!」「でも何を使えばいいの?」という方に朗報です。 この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。 slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いな ...

リキッドレイアウトは誰でもできる!!コーディングのコツまとめました
投稿日:2020年1月17日

Webデザインのスタンダードのひとつである「リキッドレイアウト」。 実はレスポンシブデザインとの違いがよくわからないとか、コーディングしてみたらなんだかうまくいかなかった・・・なんてことありませんか? この記事ではリキッドレイアウトのメリットと、実際にコーディングするうえでのポイントを解 ...

【Adobe Fonts】Web制作会社側の個人アカウントでAdobe FontsのWebフォントを使ってよいのか
投稿日:2020年1月9日

Adobe Creative Cloud(以下 Adobe CC)に契約しているユーザーが利用可能なサービスに、Adobe Fonts(旧名 typekit)というものがあります。 追加料金なく、全フォントを商用・個人用問わず利用可能となっております。 Futuraなど有名な欧文フォ ...

WEB制作「提案資料」の考え方・作り方~抑えておきたい基本のポイント~
投稿日:2019年12月26日

「WEB制作」という言葉を聞いたときに皆さんが思い浮かべる仕事はどのようなものでしょうか。 デザインを考えたり、コーディングしたり、システムを構築するなど、現場では様々な作業工程が存在します。 当たり前のことですが、そういった業務を行うためには、まずはクライアントから案件として制作の ...

HTMLで背景に斜め線を引く様々な方法(CSS、SVG、canvas)
投稿日:2019年12月25日

近年、背景に斜め線を使用しているサイトがしばしば見受けられますよね? 弊社の制作実績でも斜め線を使用したサイトをいくつか掲載しています。 株式会社オーカム:https://www.ocam.co.jp/ 株式会社ムロドー:http://www.mulodo.co.jp/ こういったコ ...

【チーム作業のデザイナー向け!】PhotoshopでAdobe Creative Cloudライブラリを使いこなそう!
投稿日:2019年12月18日

皆さんはAdobe Creative Cloudライブラリ、通称『CCライブラリ』は活用していますか? AdobeCCを利用されている方、特にコンプリートプランなどであれば様々なソフトを自由に使う事が出来ます。 WEBデザイナーさんであれば、Adobe製品はPhotoshopやXD、Il ...

カンタン!CSSでフォームをレスポンシブにしよう
投稿日:2019年11月19日

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

【最新版*2020年度にむけて】Webデザイン参考サイトまとめ【WEBサイト/レスポンシブ/LP/バナー】
投稿日:2019年11月5日

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

画面設計/ワイヤーフレームの作り方~Webディレクター必見~
投稿日:2019年10月28日

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

ホームページリニューアルのすすめ【リニューアルの進め方/ポイント/手順】
投稿日:2019年10月10日

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

【厳選10個】サイト制作の現場から厳選!すぐに活躍するchromeプラグインまとめ【全部無料】
投稿日:2019年10月2日

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

日付入力フォームのカスタマイズでもう迷わない【IEにも対応】
投稿日:2019年9月25日

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

【WP】「All in One SEO」プラグインのカスタマイズまとめ(title,description,keyword,canonicalのカスタマイズ)
投稿日:2019年9月19日

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

デザイン通りに近づけたい!文字に関するCSSプロパティ総まとめ
投稿日:2019年8月22日

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

脱初心者!駆け出しコーダーがつまづきがちなポイントを解説してみた【デザイナーも必見】
投稿日:2019年8月16日

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

時短!Photoshopのアクション&ドロップレットで大量のPSDファイルを一括で処理しよう!
投稿日:2019年8月7日

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

【画像素材管理】エクスプローラーでタグ検索が…できた!
投稿日:2019年8月7日

Web制作では画像素材をいくつも使用してサービス内容を分かりやすくしたり、伝えたいイメージや印象をつくります。 そのため段々と購入した画像素材が増えていき、欲しい画像がどこにあったのかわからなくなって時間がかかることもしばしばです。 前回(【画像素材管理】画像素材を検索してヒットさせ ...

【画像素材管理】画像素材を検索してヒットさせたい【タグ検索/無料/日本語】
投稿日:2019年8月6日

「仕事の内の〇割は探し物をしている時間だ」という話をWebデザインスクールの講師から聞いたことがあります。 年間あたり150時間、一日20分は探し物をしている時間だそうです。年間ともなると膨大な時間ですね。まさにちりも積もれば山となる。時は金なり。 参考:書類探しの時間1日に何分費やして ...

IE非対応のCSSグラデーションを文字にかける2つの方法(画像・SVG)
投稿日:2019年8月6日

IEで文字にグラデーションをかけようとするとこのようになります。 文字の背景に色がついてしまうんですね。 デザインの関係などで、IEでも文字にグラデーションをかけたいときがあるかと思います。 以下のようにしたので参考にしてみてください。 画像や幅指定などおこなうので、 ...

【すぐに使える】ユーザビリティ&コンバージョン向上!WebサイトのためのUI・UX改善ポイント26こ
投稿日:2019年8月5日

せっかく良質なコンテンツや優れたデザインがあるのに、ユーザーにとって「使いにくい」サイトになっていませんか? サイトの使い勝手が良いかどうかはコンバージョンにも関わってくる重要なポイント。ディレクター・デザイナー・フロントエンドエンジニアのそれぞれが、ユーザーがどう利用するのかを予想しなが ...