アラフォー×未経験でWeb制作会社に入社できたこと（デザイン編）｜matsuoka
こんにちは。matsuokaと申します。 今日はデザインの取り組みについて執筆したいと思います。 ◆この記事について◆ 昨年39歳でWeb制作会社にコーダーとして入社した経験が、就活中／就活予定の方への一助となればと思い、これまで行ってきたものや継続中のもので「やってよかった」と思う取り組みや心がけについてご紹介いたします。◆こんな人におすすめ◆ ・Webデザイン業界に興味を持っている方 ・これからIllustrator、Photoshop学習を始める方 ・ポートフォリオの精度を上げたい方 はじめに前提な話になりますが、私は38歳の時に職業訓練校に通っていました。 それまではデザイン系ツールは一切触れたことが無く、線の弾き方すらよくわかってないスキルでした。 職業訓練校ではそういった初学者を対象に丁寧に教えていただいたのですが、ここでは学校外（独学）で行った私の取り組みをご紹介します。 独
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。 Why Cancel Buttons Should Never Have a Color by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 キャンセルボタンに色をつけてはいけない理由 ニュートラルボタンのためのニュートラルカラー キャンセルに適したラベルとは グレーを使う時は十分に暗くする キャンセルボタンはニュ
2018年のトレンドになるかも？今年登場したWebデザインのアイデア7選
Webデザインに関するトレンドは毎年変遷を繰り返しており、トレンドの移行スピードは早まっています。 2016年にはデュオトーンやヒーローイメージを大きく使ったサイト、2017年にはスプリットスクリーンやブルータルなデザインが台頭してきました。 2018年は、どんなWebデザイントレンドがやってくるのでしょうか。 今回は、2018年に試してみたいWebデザインのアイデアをご紹介します。 これから流行しそうなトレンドをいち早く取り入れたいと考えている方はぜひチェックしてみてください。 2018年に試してみたいWebデザインのアイデア7選 1. アシンメトリーなスプリットスクリーン Odai / スクリーンショット：2017年10月 2017年は数多くのホームページがスプリットスクリーンを採用しました。 スプリットスクリーンとは、画面を中央で2分割したように見せ、左右で別々のコンテンツを見せるレ
最近のWebサイトで見かける、パンくずリストのデザイン・配置・機能のまとめ | コリス
Webサイトのパンくずリストとは、ユーザーにサイトの階層を伝え、そのページがどこにあるのかを正確に理解できるようユーザーエクスペリエンスを強化します。また、Googleのbreadcrumb schemaにより、その重要性は高まっています。 最近のWebサイトで採用されている、デザインも機能も素晴らしいパンくずリストの実装例を紹介します。 11 Ways Breadcrumbs Bolster UX Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ※サンプルに日本語版がある場合は、日本語サイトに変更しました。 wayfair wayfairのWebサイトはUX全体が素晴らしく、非常に適切なページです。パンくずリストのデザインは大きすぎず、小さすぎず、控えめに存在しているのが好ましい理由です。 パンくずリストはプロダ
今さらでも知っておきたいフラットデザインの効果と今どきのアレンジ手法｜成果につながるWebスキルアッププログラム
古くは、Windows 8の「メトロUI」、iPhoneの「iOS 7」が登場して以降、「フラットデザイン」「フラットUI」という言葉がWebやアプリのデザイン用語として広まり、今ではデザイン手法として定着しています。 しかし「見た目に凹凸がない」こと以外、いまひとつ掴みづらいフラットデザイン。単なる見た目の流行と思われる人も多いかもしれませんが、実は見た目のインパクト以上の深い意味があるのです。その、意外な事実を押さえておきましょう。 フラットデザインとは？ 字のごとく、ボタンなどを装飾する際に凹凸をつけず、立体感や陰影を加えない見た目のデザインを指します。 一般的にフラットデザインとは、デザインにおける余分な要素を排除して、立体感を生み出すエンボスやグラデーションなどの細かい加工をする代わりに、対象物を抽象化してシンプルでダイナミックなレイアウトや色使いで勝負するデザイン手法です。 リ
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
【必見】初心者WEBデザイナーが真似したい５つのWordPressデザイン - えたーなる
2014-10-26 【必見】初心者WEBデザイナーが真似したい５つのWordPressデザイン WEBデザイン 【PR】 ととっち（@totocchissu）です。 最近、ウェブデザイン検定3級に合格してほんのちょっとだけウィブデザインについて詳しくなりました。3級なんでほんのちょっとですよ。すこーしです。←しつこい 実は私、半年前までウェブデザインについてド素人でございました！！！どんぐらいド素人かというと文字の色を変えたり文字を大きくしたりすることも出来ませんでしたー！！！！ それが難しいデザインでなければコーディングもそこそこ出来るようになり、お仕事もそこそこ出来る程度です。 ちなみにWordPressは苦手なので勉強中・・。 そこで今回はWordPressを勉強するにあたって参考にしてるブログを紹介させていただこうと思います。 なぜ公開しようと思ったのかといいますとQtaro
webフォントファン｜日本語webフォントwordpressプラグイン
日本語ウェブフォントでワードプレス 簡単に使えるウェブフォントプラグインの特徴 愛されるウェブページに劇的チェンジ この上のフォントはフロップデザインWEBフォントを使用 ウェブサイトのデザインは実は文字が主役です。ページのほとんどを文字が占めています。 日本語webフォントを変えるだけでサイトイメージはガラリと大きく変わります。 カンタンにワードプレスにインストール この上のフォントはうつくし明朝フォントを使用 通常のワードプレスのプラグインのようにインストールするだけの簡単設定。 上級者はCSSページで詳細にカスタマイズ設定を行うことも可能です。 ブログやウェブ制作の効率、SEOのアップ この上のフォントはスマートフォントWEBを使用 日本語webフォントなので変更の際は文字を書き換えるだけで大丈夫。 またテキストなので検索エンジンに対するSEOの向上も期待できます。 超軽い日本語ウェ
デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ - コムテブログ
TL;DR 先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。 レイアウト 視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。 １．アクティブ・ホワイトスペース 小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。 余白の美 空白により読者のコンテンツの読み進めを制御することができ
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは
あなたのボタンデザインは、どうなってますか？ 違和感を感じさせないデザインを！｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは。先週は風邪をひいてしまい、社会と完全に切り離されていました。休むのも大切ですが、あまり長く休むと復帰するのが恐くなりますよ…。 さて、Webデザインをしていてなんとなーくマンネリしてきてしまうのがボタンのデザインです。ちょっと忙しくなったりすると、ボタンのあしらいが似てきたりしますよね。「このデザイン、キミの中で最近流行ってるの？」なんて言われちゃったり…。 そんなボタンですが、求められる役割として『押したくなる』がそこそこ重要となってくるのではないでしょうか。どんなデザインだったら押したくなるかなあ…と考えつつ…デザイン…。してますか？ 色ひとつで押したくなる度が変わってきたりもします。最近ではグリーンが訴求力が高いと言われていますよね！ しかし色以前に、「え？なんかこのボタンおかしくね？ｗ」と突っ込まれてしまったら もうそれが気になってしまって訴求力どころではありません。
【 バナーデザイン・アーカイブ ★★★ 】 - 様々なバナーのデザインを一覧でチェック！
バナーデザインをまとめたサイトです。様々なバナーのデザインをサイズや色から選んで一覧でチェック！バナー作成の参考にご活用ください！
Webデザインの“ブブン”を集めたブブンデザインアーカイブ 公式サイト
タグ一覧 タイトルロゴ(159) プライマリナビゲーション(72) グローバルナビゲーション(246) メインビジュアル(95) 見出し(326) 文字装飾(10) アクセント(29) サイドメニュー(142) ログインフォーム(68) タブ(55) テーブル・表(23) 地図(12) 特集バナー・内部リンク(525) Twitterアイコン・バナー(64) RSSアイコン・バナー(41) フォーム(9) アイコン(195) ＜前へ 次へ＞(12) 検索窓(149) パンくずリスト(12) このページのトップへ戻る(52) フォントサイズ変更ボタン(34) 問合せ・送信・購入ボタン(72) 電話番号(41) フッター・コピーライト(99) ニュース・ポータル・検索(207) ファッション(200) 音楽・ゲーム・コンテンツ配信(58) ネット関連サービス(86) オンラインショップ(308
プロっぽくなった！フォントや「文字」に関するまとめ
作成：2013/10/28 更新：2014/10/24 Webデザイン > 先週、合同商談会があったのでバタバタとリーフレット作ったんですが、字詰めなどに慣れてなくて時間をとられました。サイトをリニューアルするときもフォントの大きさ、行間、位置などで悩んだり。今回はWebページを読みやすく、見栄え良くするために「文字」に関する知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フォントに関する知識 １．字間 ２．行間 ３．字詰め ４．文字組 ５．ジャンプ率 ６．余白／図版率 ７．メリハリをつける ８．書体 ９．読みやすいフォントサイズ １０．見やすい文章 １１．Webフォント スライド １２．フォントに関するスライド フォントに関する知識 １．字間 字間とは文字と文字の間に生まれる空間。文章の行間・送り、漢字とひらがなの字間など文章レイアウト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google非推奨のオンライン広告とは？ フローティングやバナーは悪質？ | Web担当者Forum
バナーデザイン専門ギャラリーサイト | レトロバナー | 「レトロバナー」はバナーデザイン専門のギャラリーサイトです。サイズ・色・業種・テイストからバナーを絞り込む事ができ、バナーを一覧でチェックできます。バナーデザインの新たなアイデア・発想の源として要チェック！ | Page 318 of 565
Webデザイナーが知っておきたいPhotoshopのPSDファイル、レイヤー、エフェクト、フォントやテキスト、素材の効率的な管理方法
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
BLOGOS サービス終了のお知らせ
