【現役デザイナー伝授】Webデザイナーになるための独学勉強法
こんにちは！ Webデザイナーのおまめです。 私は実務未経験でWebデザイナーとして採用してもらったのですが、「美大も出てないのにどうやってWebデザイナーになったの？」と聞かれることが多くなってきました。 そこでこの記事では、私が全くの初心者から独学でWebデザインを勉強した方法や、Webデザイナーになるまでの過程を詳しく紹介します。また、未経験からWebデザイナーになった友人や先輩の体験談を集めて、叡智を集結させました。 独学でWebデザイナーを目指したい人はもちろん、副業でWebデザインの仕事がしたいという人にも必ず役立つ内容になっているので、ぜひ最後までご覧ください。 できるだけ価格を抑えてWebデザインを学びたいですよね。でも「独学で本当に転職できるの？」「仕事とれるの？」と不安な方も多いのではないでしょうか？ Webデザイナーとして転職するためのポイントは現場レベルのデザイン力
「“気づかない”くらいがいいデザイン」ユーザーストーリーに沿ったUIの可能性を追求する｜ グッドパッチ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
UI/UXデザインについて、企画コンセプトから実装までを手がける株式会社グッドパッチ。キュレーションアプリ「グノシー」のUI設計で脚光を浴びた同社ですが、それにとどまらず、2014年10月には自社開発のプロトタイピングツール「Prott（プロット）」をリリース。今やDeNAやヤフーなどのリーディングカンパニーをはじめ、世界140ヶ国以上、約5万人に使用されているツールとなっています。 2015年のグッドデザイン賞を受賞するなど、まだまだ加速を続けるProttですが、正式リリースまでは「悪戦苦闘が続いた」と当時の開発メンバーは振り返ります。今回は、同ツールの開発経緯やコンセプトについて、開発チームに在籍するエンジニアのひらい氏、フロントエンドエンジニアの吉田氏、UIデザイナーの小林氏にお話を伺いました。 人物紹介：ひらい さだあき氏 2015年1月にグッドパッチ入社、2015年12月にCTO
実家のケーキ屋でまさかのWebプロモーションを担当することになった奮闘記（1） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、管理課のしどうです。 私は社会人になってLIGで「管理課のしどう」になるまでは、20数年間ずっと「ケーキ屋の娘」でした。神戸市北区の、街中からはちょっと離れたところにある「菓樹工房ユーカリプティース」というケーキ屋です。 LIGに勤めていることもあり、さまざまなWEBプロモーションを毎日見てきた私は、実家のケーキ屋もそういう風にアピールしたい！と思うようになりました。 実家のケーキ屋でWebプロモーションを取り入れる過程を全公開します ただ、Webプロモーション専門の部署があるような大手企業ならともかく、街にある個人店でやるのは難しいイメージがありますよね。実例もそこまで多くは見受けられない気もします。 そこで、これからシリーズ記事として、実家のケーキ屋「菓樹工房ユーカリプティース」がWebプロモーションを取り入れていく過程を全公開します！ 私と実家の両親、そしてお店のスタッフ
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
MQTTブローカーサービス「sango」を使ってJavaScriptだけでチャットを作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まろCです。 幼い頃から本が嫌いで、読み始めると数ページで眠くなってたんですが、最近読めるようになりました。なんと、Kindleで読むと眠くならないのです！ もっと言うと、Kindleで行間を空けて、文字を大きくし、1ページで見える文字数をなるべく少なくしたら睡眠魔術が効かなくなってきたのです。 それはさておき、今回は最近話題のMQTTについて、MQTTブローカーサービス「sango」を使ってチャットツールをつくってみたので、そのことを書きたいと思います。実装はフロントのみ！ MQTTとは https://sango.shiguredo.jp/mqtt 一言で言うならば、「あらゆるモノをつなぐ軽量プロトコルで、パブリッシャー（送信者）とサブスクライパー（購読者）の間に位置するMQTTブローカーサーバーを介して、メッセージをやりとりする」といったところ。 ちなみに、Faceboo
Web編集者・ライターが間違うと恥ずかしい日本語の正しい用法10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGブログ編集長の朽木（@amanojerk）です。いま僕の背後では、社長から「デスクが汚い」と怒られたらしい上司が「守破離しなきゃ、守破離…」とブツブツ言いながらゴミを捨てています。 ちなみに、守破離（しゅはり）とは、 まず師匠に言われた型を「守る」ところから修行がはじまり、その型を研究してより自分に合った型をつくることで既存の型を「破り」、最終的には師匠の型、そして自分自身の型からも「離れ」て自在になる。 という意味の、要するに剣道とかのヤツです。多分なんですけど、断捨離（だんしゃり）って言いたかったんだと思います。 さて、かく言う僕も編集・ライティング業務に従事しておりますが、出版社や編集プロダクションの勤務歴はありません。また、今でこそ社内の編集者たちをとりまとめる立場ですが、僕の入社以前は社内に商業経験のある編集者・ライターがほとんどおりませんでした。 何が言いたい
小さな工夫が光る、テキストリンクのHoverアニメーション参考集 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 近頃はいろいろな動きを取り入れたサイトが増えていて、「Webって楽しい」というワクワクが今まで以上に感じられます。 私が最近ちょっと気になっているのは、サイト全体の大きな動きではなく、いちパーツである「テキストリンク」のHoverアニメーションです。 大きな部分の動きや同じリンクでも目につきやすいボタンリンクには、いろいろなバリエーションの動きが取り入れられています。一方でテキストリンクについては、ありきたりなエフェクトになってしまっているサイトがまだまだ多いなぁ、と思われます。 そんな中で、そういった些細な部分も手を抜かず作り込まれているサイトを見ると、思わず「おっ！」と立ち止まってしまいます。 サイトコンセプトに沿った効果的なアニメーションを入れることができれば、ワンランク上のWebサイトになっていくはず。 というわけで今回は、テキストリンクのHo
あるWebメディアをコンサルしたら3ヶ月で12倍のPV数になったときの話 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんこんにちは、メディアマネージャーのそめひこです。最近は友人の結婚式ラッシュで、弊社CTOである高遠和也が個人運営する高遠銀行、通称“づや銀”からの借入が止まりません。 そんなことはさておき、以前とある企業様のオウンドメディアについて、3日間×4hでコンサルティングを実施したことがありました。結果としては、実施前の月間PV数が「38,815」だったのに対して、コンサル開始から3ヶ月で、月間PV数は「502,037」になりました。 今回の記事では、そのときの実際の取り組みについて紹介していきたいと思います。「オウンドメディアを始めてみたものの、あまりPV数が伸びなくて…」とお悩みのメディア運用者の皆様にとって、少しでもお役に立てば幸いです。 コンサルティングしたオウンドメディアについて まず最初に、コンサル実施前の運営状況について箇条書きにしてみます。 社内のメンバー3名が本業の片手間
無料でできる！オリジナルアイコンフォントを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんはじめまして！ アートディレクター兼デザイナーの長岡と申します。 社内では、ひろさんと呼ばれています。 入社したばかりですが、どうやらLIGの最年長記録を更新したようです(^^;) 2児の父親として、プライベートでは、子育てに奮闘中なのですが、最近乗り物に興味を持ちだした息子。 電車や車が大好きなようで、テレビに映る度に指をさして「でぇ～んしゃ～♪」とか「ぶぅ～ぶぅ～♪」と叫んでます。 そんな息子の姿を見て、毎日癒されてます(^-^) さて本題に入りますが、スマホサイト・レスポンシブデザイン・Bootstrapなどで度々目にするアイコンフォント。 モバイルファーストを考えながらの制作ですと、表示速度も意識しなければなりませんね～。 フリーのアイコンフォントは、たくさんあれど、「アイコンが多すぎる！」「もっと少なくしたい！」「オリジナルでアイコンを作ったけれども、これをどうにかアイコ
SlackとRedmineを連携し、登録したチケットの更新を通知する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、管理部兼エンジニアのtetsuです。 今回は話題の「Slack」と「Redmine」を連携し、Redmineに登録されているチケットが更新された場合、Slackに通知する方法を紹介します。 Slackとは？ チーム用のコミュニケーションツールです。 HipChatやYammer、Skypeよりも使いやすいため、海外で人気を集めています。 参考：Slack https://slack.com/ 「Slack chat plugin for Redmine」のインストール Redmineに「Slack chat plugin for Redmine」プラグインをインストールします。 ※ここではRedmineのバージョン「2.x」で解説していきます Redmineをインストールしたサーバで、Redmineインストール先ディレクトリ内にある以下のディレクトリに、プラグインをダウンロード
Sassを使ったコーディングの強い味方に！便利なextend＆mixin集を作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ぺちこです。 先日水族館に行ったら「ペンギン12種模型セット」なるものをショップで発見し、危うく買うところでした。 Suicaペンギンのモデルはおそらくアデリーペンギンですが、私が愛してやまないのはジェンツーペンギンです。どうでもいいですね。（興味をもった人はみんな友達） さて、以前にデザイナーのせいとくんが Sassの導入方法と Sassの基本テクニックについてまとめてくれていましたが、今回はそれらを踏まえて、コーディングに役立つextend＆mixin集を作ってみました！ 日々ちょこちょこと作っては使いまわして・・を繰り返しており、あると便利なものは先にまとめておけば楽ではないかと、やっと気付きました。 サンプルで作ったhtmlとscssファイルを一式ダウンロードできるようにしていますので、そのまま使っても良し、各自（各社）毎のコーディングルールに合せて改良しても良し、要ら
ファビコン（favicon）とは？代表的なサイズと基本の作成方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ファビコンはサイト閲覧時のタブ以外にも、多くの場所で使われていることがわかります。 また、上記以外にも検索結果画面にも表示されるため、そのサイトを表す適切なアイコンを設定するようにしましょう。 作成時のサイズは512px × 512pxのみでOK これだけサイズがあると、全て用意するのかと不安になってしまいますが、WordPress4.3以降のバージョンであれば512px × 512pxのPNG形式ファイルを作成すれば全てに対応してくれるようになりました。 複数作成する必要はないので安心してください。 WordPress以外の場合 WordPressを利用しておらず上記のような自動適用の機能がない場合、またはWordPressが4.3以前のバージョンの場合は、各サイズのアイコンを用意する必要があります。 各ブラウザのファビコン表示サイズは先ほどの表の通り16px × 16px が一般的です
これがあれば自信が持てる! ライター必携の原稿セルフチェックシート15項目 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。子煩悩ライターのイワタテです。 娘、と書くより、愛娘、と書いた方がしっくり来るんです。 きっと、愛しているからでしょうね。 ところで、ライターという職種に限らず、仕事で文章を書くすべてのみなさん。 原稿、自信をもって出していますか？ 僕は、自信をもって出しています。 その秘密は、原稿提出直前に必ず使う、15項目のセルフチェックシートです。 このチェックシートを活用するようになってからというもの、クライアントの機嫌は良くなるし、読者からのレスポンスが見違えたし、みるみる仕事が増えていくし……父ちゃんやったぜ愛娘！ 原稿送信のボタンを押すときはいつも不安になるという方。 よろしければこのチェックシート、印刷して机のどこかに貼って、使ってみてください。 □ 原稿の結論がタイトルに明記されているか。 何が書いてある原稿か直感的に理解できなければ、そもそも読者はページを開かない。 □ 想
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
コピーライト（Copyright）とは？著作権表示の正しい書き方や意味を解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 サイトをデザインするときに当たり前に入れている「Copyright（コピーライト、©️）」の記述ですが、サイトによって年号があったりなかったり、長かったり短かったり、書き方はさまざまですよね。 今回はコピーライトとは何か、正しい書き方や©との関係性について詳しく解説していきます。 コピーライトとは コピーライトとは、英語で「Copyright」と書き、”著作権”のことを指します。著作権とは、作品を創作した人や会社（著作者）が持つ権利であり、著作者は作品がどう使われるか決めることができます。 Webサイトやホームページの下部にコピーライトがあるのは「ここにある記事や画像の著作権は自社が持っているから、無断転載しないでください」という一種の意思表示です。 厳密にいうと著作権法で著作物は「思想又は感情を創作的に表現したものであって、文芸、学術、美術又は音楽の
色選びでもう迷わない！配色の定石パターン | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近、チャリを手に入れた。しかも、新品のやつだ。前にかごもついてて、後ろに荷台もついてる！さらに鍵もついてる至れり尽くせりな優れものだが、どういうわけかチリンチリンがついてないんだ！なんでついてないんだチリンチリン！必要だろチリンチリン！人ごみとかこう、かきわけ、あ、どうも、僕です。 今日は色選びで迷わないための配色の定石パターンについて書こうと思うよ！ その前に色の表現方法の基礎知識についてちょっと勉強しようね！ 色の表現方法 色とは、可視光線の波長の違いによって、 人間の目に存在する細胞が反応し、 脳に伝わって認知する現象のことを言うわけですが、 まあ、そんなめんどいことはおいといて、 色とは「赤」とか「青」とか「緑」とかそういうもののことをいうわけですな。 ちなみに色を識別する細胞は目の中心部分に集中してて、 視野の外周部分の色って実は実際には見えてなくて、 脳が視界を認知する際に補
1分で分かる！Google AnalyticsでABテストを行う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちわ！ひろゆきです。 WEBページを改善したい！となった時にデザイン見なおしたり導線確認したりいろいろやると思いますが、中でもABテストは「AとBの比較」という単純明快な手法でありながら信頼出来るテストだと思います。今回はそのようなWEBページを改善するときに行いたい「ABテスト」をGoogle Analyticsで簡単に行う方法をご紹介します。 また、以前同じような機能のgoogleウェブサイトオプティマイザー（googleウェブサイトオプティマイザーの使い方）をご紹介したのですが、こいつがanalyticsに統合されたみたいです。 ABテストとは ABテストとはページを2パターン用意して、「どちらが優れているか」を導き出す手法です。2つのページを用意してどちらがコンバージョンが多いかを測るだけなので、シンプルで信頼出来るテスト結果を得ることが出来ます。そんなABテストですが、Go
グランジからかわいい系まで！CSS3でステッチ（縫い目）を表現する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回はボタンなどのあしらいに便利な小ネタをご紹介します。 上記画像のような、糸で縫いつけたようなあしらいをCSS３だけで実装できちゃうんです。 HTML <body> <h2>outlineでステッチ</h2> <p class="s1">LIFE IS GOOD <h2>outlineでステッチ+box-shadowで更に外枠</h2> <p class="s2">LIFE IS GOOD <h2>borderでステッチ+box-shadowで外枠</h2> <p class="s3">LIFE IS GOOD <h2>角丸</h2> <p class="s4">LIFE IS GOOD <h2>変形</h2> <p class="s5">LIFE IS GOOD <p></body> body { background: #ccc; } h2 { text-align:center;
これは罠。PHPでiPhone端末にPUSH通知を送る際の落とし穴 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
段田です。 最近、PHPからiphone端末にPUSH通知を送る機能の開発に携わりました。PHPでプログラムを実装する場合、フルスクラッチとライブラリを使用するケースがあるのですが、各ケースでのポイントを忘れないよう書きたいと思います。 なおPUSH通知の概要、証明証の作成については省略します。概要などは下記の記事がわかりやすく、参考になりました。 Apple Push Notification サービス(APNs) の実装方法 iPhoneプッシュ通知まとめ フルスクラッチのケース フルスクラッチでやる場合、こちらのはてなの記事が参考になりました。 https://irss.hatenablog.com/entry/20111026/1319632548 しかし、試しに作成すると送信はできるのですが、下記の様な制約があることを知ります。 1つのメッセージで256バイトを超えてはいけない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
