ブログBLOG

【学生さん向け】ポートフォリオに載せるためのWebサイトの作り方【コーディング編】

就活にポートフォリオは欠かせませんね。 Web業界に就職したいと考えている学生さん向けに、ポートフォリオに載せるためのWebサイトの作り方についてまとめてみたいと思います。 本記事では特にコーディング初心者さん向けに、フォルダ構成やリセットcssなど、かなり初歩的な内容を分かりやすく説明 ...

モダンなサイトで良く見るWeb表現技術

デザイン通りにコーディングできるようになってきてプログラムにもそこそこ強くなったけど、Awwwardsなどに掲載されているWebサイトを見ているとどうやって作られているかわからない…そんな経験はありませんか？ 今回はモダンなブラウザで良く見るWebサイトを少し豊かにする知識と技術を簡単にまとめまし ...

【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ（デモ・サンプルコード付き）

最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。 特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。 ただ、アニメーショ ...

【中小企業向け】最適なCMSを選んで自社サイトに集客しよう！～選定の観点と重要性～

みなさんはCMS（コンテンツ管理システム）といえば何を思い浮かべるでしょうか？ やっぱりWordPress？それともMovable Type？ほかにもまだまだありますよね。機能もお値段も千差万別です。 この記事では主に中小企業様向けに少しでもCMSの理解を深めて頂く為に記事を書きました。 ...

目指せデザイン完コピ！！少しでもデザインに近づけるためのHTMLコーディング

HTMLコーディングをしていて、見た目では完璧にデザイン通りになっていると思っていても実際比べてみるとすごくズレてる… 皆さんそういう経験あるのではないでしょうか。 まず気を付けないとどれぐらいズレてしまうのか、また努力次第でどれぐらいデザイン通りになるのか比較してみました! まず ...

【迷ったらコレ！】Webデザインでよく使う定番おすすめフォント13選（日本語・欧文・ゴシック・明朝など）

Google Fontsのサービスなど、最近では無料で使えるフォントも増えてきました。 しかし、数もかなり多くどんなフォントを使えばいいのか迷ってしまいますよね。 今回はWebデザインの現場からよく使う定番のフォントをご紹介いたします。 [toc heading_levels="2,3,4"] ...

【デザイナー向け】参考＆情報収集に！チェックしたいおすすめサイト7選

デザインのトレンドや技術は日々移り変わり進化していくものです。 特に、ウェブデザイン業界はトレンドの変化、技術やデバイス、ツール面の進化のスピードも速く日々情報収集をしていないとなかなかついていけません…。 そんな悩めるデザイナーさんへ今回はデザイナーにおススメのメディアサイトや技術情報 ...

【ツール別比較】2020年時点におけるPhotoshop切り抜き方法まとめ

デザイン業務において避けて通れない作業のひとつに画像の「切り抜き」があります。 WEBサイトやバナーの中に、素材写真から綺麗に切り抜いた製品や人物の画像が効果的に入っているとそれだけでデザインがぐっと引き立ちます。 皆さんは普段どんな方法で画像の切り抜きを行っているでしょうか。 基本的に「綺麗 ...

【2020年版】ヘッダー・メガメニュー・スマホメニューのデザイン参考まとめ

世の中には様々なウェブサイトがありますが、ほとんどのサイトで取り入れられているのがヘッダーですね。 皆さんはどのようなデザインを思い浮かべますか？ PC時のデザインであれば、「左端にロゴがあり、右端にナビゲーションとしてリンクがある」といった形を想像される方が多いのではないでしょうか。 作成する機 ...

Adobe XDで作れるデザイン・作れないデザイン（PhotoShopとの比較）

PhotoShopはデザイナーなら誰もが一度は使ったことがあるデザインツールだと思います。 webのデザイン作成をPhotoShopで行うwebデザイナーも多いですよね。 そこで皆さん、Adobe XDというデザインツールをご存じでしょうか？ 今回はXDをPhotoShopと比 ...