WEB

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

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

デザインを綺麗に見せる余白!~デザインの基礎~
投稿日:2019年12月27日

今回は余白についてデザイン初心者さんや学生さん向けにご紹介したいと思います。 皆さんは余白とどう付き合っていますか? デザインするうえではかかせない存在の余白。なんとなく…といった感覚で使っていると違和感のあるデザインや 情報を正しく受けとってもらえないデザインになってしまいます。 ...

【Nuxt.js】SPA(シングルページアプリケーション)で作るお洒落なページ遷移
投稿日:2019年12月26日

Web技術の発展に伴い、近年のWeb制作はより複雑で面白いものになってきました。 そこで、今回はSPA(シングルページアプリケーション)で作るページ遷移のデモを制作しましたので、ご紹介しようと思います。 Contents Nuxt.jsについて 導入方法 シンプ ...

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

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

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

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

【WordPress】クライアント目線で使いやすく!管理画面カスタマイズのポイント8つと対応方法まとめ
投稿日:2019年12月13日

WordPressのカスタマイズをしていくと、機能が多くなればなるほど管理画面がごちゃごちゃしてきます。 制作する側は慣れたものですが、実際に更新・投稿をするクライアントの視点で見ると、実は不親切設計になっているかも知れません。 そこで、今回はクライアントが使いやすい・ミスしにくい管理画面に ...

急にオウンドメディアの担当者になっちゃった! 初心者のための簡単SEO対策
投稿日:2019年12月11日

HTMLもSEOも全然わからないけどメディアサイトを運営することになった方向けに、誰でもすぐ実践できる10このポイントをご紹介したいと思います。 Web制作に携わる者にとっては常識でも、普通の人は「SEO」という言葉さえ聞いたことがないかも知れませんね。 とりあえず記事をたくさん書けばよいの ...

カンタン!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]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟 ...

デザイン通りに近づけたい!文字に関する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日に何分費やして ...

【社内デザイン】レスポンシブテーブルのデザインの作り方【Photoshop】【独学デザイナー必見】【WEBデザイン】
投稿日:2019年4月5日

以前「もう悩まない。CSSでレスポンシブなtableデザイン&コーディング」でテーブルのhtmlコーディングについては記事をまとめさせていただきましたが、 今回は社内のデザインデータをあさってテーブルデザインのパターンを見てみたいと思います。 その前に3年くらい前のデザインデータからテー ...

超~かんたん!誰でもできる人物レタッチ【Photoshop】
投稿日:2018年7月17日

5分でできるレタッチ?! Photoshopで誰でも簡単にできる人物写真のレタッチ方法をご紹介します。 参考として「美容系サイトのメインビジュアルで使用する人物写真」のレタッチを行っていきますが、採用サイトやLP制作など様々な場面で使えると思います。 レタッチ作業は時間がかかるとい ...