子供の頃から絵を描くこと（ラクガキ）が大好きでした。 とはいえ、絵を仕事にする画家や漫画家になりたいというのはあまりなく、ただ単に絵を描くことが好きでテストの裏紙やノートや手帳に描いたりがほとんど。 それもあって「これは自分が楽しむためのラクガキなんですよ」といい続けてきました。 そんなある日、このブログで私のラクガキを見てくれた知人の「僕も絵を描けるようになりたいんです！」というリクエストに応えるために「ハッピーラクガキライフ」というラクガキ講座を開催することになりました。 今回はその講座の中でも一番キャッチーで多くの人に喜んでいただいている「絵が苦手な人でも一瞬で100の表情が描けるようになるテクニック」をご紹介したいと思います。 人間の表情を構成する要素 人間には人の顔にとても敏感に反応する本能が備わっています。この現象のことを「シミュラクラ現象」といいます。 ▼点3つが顔に見えるこ

僕は、プログラムをする上で変数や関数に良い名前を付けるのはとても重要と考えています。 というのも、良い名前を付ければ、それだけでそのコードがしたいことの説明になり、コメントと同等の働きをすることもあるからです。 自分がちゃんとそれをできているのかはさておき、僕は普段から、できれば読みやすくて分かりやすい名前を付けたいと思っています。他の人も読むコードであれば、できればプログラムでよく使われるような単語を利用して書いた方がより分かりやすいです。 ただ、よい名前を考えるのって、ちょっと面倒くさいんですよね。僕はこれまで、英語の辞書を利用して、考えたりしていたのですが、「何か、プログラムでよく使われる単語をまとめたものはないか？」と探したら、ドンピシャのものがいくつかあったので、それらをまとめて以下で紹介します。 photo by Michael Coté codic codic – デベロッパ

こんにちは。LIGでデザイナーをしています、マチルダです。 突然ですが、皆さんは好きな色はありますか? デザインをする上で「色」はとても重要な要素ですが、自分は使うのが苦手な色がありました。それは、ズバリ「黄色」です。 決して嫌いなわけではない、むしろ黄色を使ったかっこいいサイトは大好きなのですが、自分でデザインすると、なんだかまとまらない…。 特に文字は、白地に黄色の文字（反転のときもしかり）だと読みづらくなってしまうので、合わせるカラー選びや使うポイントを押さえることが必要だな、と日々感じております。 今回は、黄色をステキに使っているサイトの中から、特に参考になったサイトをご紹介したいと思います！ 黄色ってどんな色? 黄色は有彩色の中で一番明るい色です。光や太陽のイメージが浮かびます。見ているだけで心を弾ませ楽しい気分にさせてくれるのでコミュニケーションを円滑にしてくれます。知性を刺激

こんにちは、メディア事業部のヨシキです。 皆さんはこれまでに転職を経験されたこと、あるいは検討をされたことはありますか？ 最近では転職は珍しいことではなくなったとはいえ、やはりキャリアパスやそれまでの生活を一変することになるため大きな不安が伴います。 僕も転職でLIGに入社したのですが、以前から知っていた企業だったということもあり、ある程度入社後の働き方が想像できる中での転職でした。 それでも「失敗したらどうしよう」という不安は強かったですし、今もその気持ちはあります。転職の理由や志望動機は人それぞれだと思いますが、共通しているのは、やはり「失敗への不安」なのではないでしょうか。 そこで今回は、エン・ジャパン株式会社が運営する転職エージェント『エン エージェント』さんで、キャリアパートナーとして求職者の転職活動を親身にサポートし、多くの成功実績を持つ石原さんにお話を伺い、失敗しない転職活動

書籍化し、12万部突破しました。 【SlideShare広告回避用】 https://www.docswell.com/s/morishige/K3MXPZ-howtodesignslides ・PDFは無料でダウンロードできます ・自己学習や勉強会などの目的でしたらご自由にお使いいただけます ・授業・研修への利用はフォーム( https://forms.gle/WwgXTT974xFW78mFA )にご報告ください ・記事への参考資料にする際は適切な出典明記をお願いいたします 【使っているフォントについて】 M+フォント「MigMix1P」です。こちらもメイリオ同様おすすめです。 フリーで使えます。 【個人HP】 > https://mocks.jp > 仕事のご依頼はこちらから 【書籍情報】 デザイン入門：https://amzn.asia/d/4WDsTI6 デザイン図鑑：https

TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ

IllustratorのブラシはPhotoshopに比べて数は少ないですが、探してみると高品質で面白いものが揃っています。個人や商用で無料利用できるIllustratorのブラシ素材を紹介します。

iPhone Safariブラウザサイズは何px？ viewport width=device-width時 108,078views／投稿 2014-09-19／更新 2017-11-13 ［追記］iPhone 8/8 Plus も7も6と同じブラウザサイズ。iPhone Xも幅は375です。この英語サイトがわかりやすいです。 iPhone 6と6 PlusのSafariブラウザ解像度をAppleストアに行って実機で調べて来ました。 iPhone 6 Plus ブラウザサイズ ： 414 × 736 ピクセル 物理的な解像度 ：1,080 × 1,920 ピクセル解像度、401ppi、5.5インチ iPhone 6 ブラウザサイズ ：375 × 667 ピクセル 物理的な解像度 ：750 × 1,334 ピクセル解像度、326ppi、4.7インチ iPhone 5系 ブラウザサイズ ：3

心と身体にHOTをつくる。 意味もなくただ、走りたくなったあの瞬間 大人になるに従って、薄れてしまった感覚 怖さも感じながら、心の奥底が熱くなった体験 大人になってからは、冷静と情熱のあいだを行ったり来たりしているけど、 今も身体と心には「熱」があり、僕たちをワクワクさせる。 ワンパクはそんな感覚を大切にしています。

2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって

Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I Use...Support tables for HTML5, CSS3 Can I Useは先月くらいにUIを刷新し、より使いやすくなりました。デスクトップ・モバイル用の各ブラウザでのバージョンごとのHTML5, CSS3のサポート状況がそれぞれ詳しく分かります。

優しくナチュラルな雰囲気を出したい場合は手書き風のデザインは相性がいいです。 Photoshopで簡単にできる手書き風の記事を集めました。 写真加工 Photoshopできれいな水彩画風デザインに挑戦！ | Webクリエイターボックス Photoshopできれいな水彩画風デザインに挑戦！ | Webクリエイターボックス 水彩画はやさしいタッチがだせるので重宝します。 写真をイラスト風に加工する方法 写真をイラスト風に加工する方法 アバンギャルドなデザインをする場合に使えそうです。 更に加工することで、歴史風にすることもできそう。 写真をイラスト風に加工する 写真をイラスト風に加工する FMステーションや英語の教科書のニューホライズンなどであったようなイラスト。 ポップな雰囲気をだしたい場合に。 写真を加工して、手描きの雰囲気を作り出そう！ 写真を加工して、手描きの雰囲気を作り出そう！ 墨な

サイトを運営していると、サイト内のページの移動や削除、またはサイト自体の移転をすることがあります。その場合、リダイレクトという処理を用いて新たなページに転送を行いますが、正しい知識と手順を以って対応しなければ、検索順位の下降、ページランクやドメインエイジの喪失といったSEO的なペナルティを招いてしまいます。 そこで、そのようなペナルティを受けないために、ページ移動・サイト移転時の正しいリダイレクトの設定方法と、代表的なリダイレクトの種類やその実装方法をご紹介します。 リダイレクトの種類 リダイレクトには、HTMLやJavaScriptといったクライアントサイドプログラム、PHPやPerlといったサーバサイドプログラム、あるいは.htaccessの設定変更を行う等、様々な対応方法があります。そのうちのいくつかを、実際のサンプルソースとともに解説します。 metaタグによるリダイレクト hea

Webページ上でベクターのアイコンを簡単に表示できる憎いアイツ。そう、アイコンWebフォント。 Retinaディスプレイでも綺麗に表示されるし導入は（そんなに）難しくないし至れりつくせり。 セマンティック？なにそれおいしいの？ そんなわけで今回はよく使っておりますアイコンWebフォントのセットと、ジェネレーターをまとめてみました。 ※紹介しているフォントを使用する際は、ライセンスを必ずご確認ください。 Font Awesome とっても有名なアイコンフォント、Font Awesome。600を超えるアイコンを使用できるのが特徴です。ソーシャル系のアイコンも揃っております。線のRは少し強めの印象。 個人・商用利用なのも嬉しい。 Font Awesome, the iconic font and CSS toolkit Entypo キリッとしたアイコンがエレガントなイメージなのがEntypo

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

身につける服でも仕事のプレゼンテーションでも、何かの見た目を良くしたいのなら、色は大切な要素です。ですが、オレンジと青が完璧な組み合わせだなんて、誰もが直感的に知っているわけではありません。自分の直感を信じられないなら、色彩理論の基本を理解して、それをもとに正しい色を選んでみてはどうでしょうか。 色相環を知る 上の図は基本的な色相環で、色を選ぶ際の指針になるものです。学校で見たことがあるかもしれませんが、忘れている方のために、簡単におさらいしておきましょう。 赤、青、黄色の3色が原色です。赤と黄色を混ぜると橙になります。青と黄色を混ぜると緑になります。赤と青を混ぜると紫になります。そのため、橙、緑、紫は二次色と呼ばれています。赤紫や青紫などの三次色は、原色と二次色を混ぜたものです。 すべての色には明色（明度の高い色）と暗色（明度の低い色）があります。明色は元の色に白を混ぜてできる色、暗色は

こんにちは、LIGフィリピン支社代表のせいとです。いきなりですが皆さん、コーディング中にブラウザのバグや仕様にぶつかって、解決策をググってみてもヒットせず「ヤバい、詰んだ」的な状況になったことはありませんでしょうか。 古いバージョンのIEとかAndroidならネットに蓄積された情報がけっこうあるのですが、ChromeやIE11で動作がおかしくなると、比較的情報が少ないので困ります。 今回はそんな「モダンブラウザ（PC）」に焦点を当てて、コーディングのレアケースなトラブル5つと、実際にそれをどう回避したのかをご紹介します。 <a>タグに「position:absolute」を指定してホバー時にスタイルを変えようとすると中のテキストが一瞬太字になる（Safari） 以前、「position:absolute」を使ってホバーすると動くボタンを実装したことがあったのですが、safariで見るとホバ