アイコン・ピクトグラムとは？ Webサイトデザインやアプリデザインをする際に必要なボタンなどに使用するイメージ画像のことです。 デザインの完成度を高めたり、UI/UXを向上させる役割も持ちます。 ・自分でアイコンを作る時間はない… ・面倒でいつも同じピクトグラムを使っている… ・デザインのクオリティを楽に上げたい… という方にダウンロードして欲しい使えるアイコン・ピクトグラムのセットを30個まとめてお届けします！ 1. MimiGlyphs 16×16pxのアイコンが80個収録されている。PSD, CSH, PNGファイルをダウンロード可能。 2. Simple Line Icons Set vol.1 / Simple Line Icon Set vol.2 シンプルなデザインのアイコンが40収録されている。32×32pxと64×64pxのPSDファイルがダウンロード可能。 vol.1に

「オウンドメディア」や「コンテンツマーケティング」というキーワードがすっかり定着したように、自社サイトへの集客の重要性はますます高まっています。そんな中、株式会社LIGさんのサイトは、約3年間で月間300万PVを集められるメディアにまで成長を遂げました。Web制作会社のコーポレイトサイトに、なぜそれだけ多くの人が集まるようになったのでしょうか。何かイケナイ技でも使っているのでしょうか。 本記事ではそんな株式会社LIGメディア事業部のヨシキ先生、朽木 誠一郎先生、ソメヒコ先生の３名を先生として迎えた「月間300万PVの”LIGブログ”編集部による「人が集まる」Webマーケティング講座 」という授業を基に、LIGブログが300万PVを集めるWebメディアになった理由についてまとめました。 LIGさんの事例から、メディアのWebマーケティングについての実践的なノウハウを学び、今後のメディア運営な

本記事では、タイポグラフィついて学んでいきます。文字選びの理論を学んで一段上のデザイン力を手に入れましょう。 ※この内容は東洋美術学校の丸山 貴明先生・中村 将大の「明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】」を基に作成しています。 ■目次 1. タイポグラフィってなに？ 2. 文字の選び方で重視することは3つ （1） 書体はシチュエーションに合わせよう （2）サイズ・ウェイトはヒエラルキーを決めてから （3）デザイン力は字間／行送りの調整で決まる 1. タイポグラフィってなに？ “タイポグラフィは、活字（あるいは一定の文字の形状を複製し反復使用して印刷するための媒体）を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。”（wikipedia「タイポグラフィ」より引用） 世界的に知られるデザイン会社、Information Archit

「なかなか点数が上がらない」 「TOEICと聞くだけで、気分が落ち込む」 「単語力や読解力が点数に反映されない」 そんな悩みを抱えている方へ向けて、この記事ではporpor流・TOEIC対策 - 600点以上取得のための学習法から、3ヶ月でTOEICスコアを200点アップするための心構えと勉強方法をまとめました。 ■目次 1.心構え 2.勉強方法 3.ひとりで学習するのが苦手なあなたへ 1. 心構え ・覚悟と継続 3ヶ月で200点アップのためには、まずは覚悟を決めることが必要です。あなたは、本気でTOEICに向かい合っていますか？ 中途半端な気持ちで受験するのはとてももったいないことです。英語をやらないという選択肢のある中で、なぜやるのか、しっかり考えてみてください。どうしてもやらなければならない、どうしてもやりたい理由を明文化してみてください。覚悟が決まり、理由を言葉に出来たら、それ

スクーのWebデザイナー学部でもとても人気がある「配色」関係の授業。デザイン関係のお仕事以外でもプレゼン資料や報告書でのExcelの配色、ひいては、普段の洋服のチョイスまで、配色について悩む機会は多いもの。美術の授業以外に配色について学ぶ機会がないまま今に至ってしまった人も多いのでは？そこで今回は、ブラウザやiPhone／Androidアプリで使える配色ツールをご紹介します！ 1. HUE/360 http://hue360.herokuapp.com/ 最初のキーカラーを決めれば、自動的に配色的に間違いのない配色を絞り込んでくれます。デザインもキレイで直感的に操作出来ます。スクーの授業でも度々登場している間違いの無いツールと言えそうです。ちなみに、hueとは色相（色合い）という意味です。 ・Color Space（RGBとか） ・Hue Step（色合い） ・Chroma Step（彩度

■HTML5とは？ コンピュータをよく使う人なら一度は耳にしたことがある「HTML」。HTMLとは、Hyper Text Markup Languageの頭文字を取ったもので、直訳すると「ハイパーテキストのための、（文章に）目印を付ける文法（言語）」という意味です。つまり、私たちが普段読み書きする文章の、見出し・段落・箇条書きなどの要素をコンピュータに捉えさせるための文法ですね。初期のHTML1.0が開発されたのが1993年、それからバージョンアップを重ね、1999年12月にバージョンアップされたHTML4.01が昨今までホームページを作る言語としてWebを支えてきました。 そして、2014年10月28日にHTML5が勧告されました。特に「HTML5」は今多くの注目を集めています。今回はHTML5を使って出来ること、従来のHTML4との違いをまとめました。 ■目次 1. どんなデバイスでも

「効果的なTipsが見つからない」 「試験中いつも時間が足りず、目標点数まで到達できない」 「TOEICのテキストは買ってみたけど、点数が伸びない」 ……などの悩みをお持ちのTOEIC受験生に【TOEIC学習のプロが教える、3カ月で600点を目指す超特訓】の授業をまとめました。 今回は、「porpor流・TOEIC対策 - 600点以上取得のための学習法」からPart1の対策法を紹介いたします。 この対策法はTOEIC満点取得者であり、英語学習コンシェルジュである渡邉 淳先生が、試行錯誤をしてたどり着いたものです。 ※TOEICテストPart1【写真描写問題 10問】とは Part1では、1枚の写真に対して4つの短い英文が流れます。選択肢の音声を聞いて、写真の内容と合っている選択肢を選んでいきます。600点～700点を目指している方は、このPart1で6、7問正解出来るようにしておきましょ

Schooでは、累計9,000回以上のA/Bテストを行ってきたKaizen Platformの方々から、グロースハックの基礎、A/Bテストの実施方法、効果の出た最新のグロースハック手法、インサイトマーケティング、Webライティングの手法などを学ぶことができます。 グロースハックとは何か、まだよく理解していないという方は、このまとめで予習をしてからオススメの授業を受けてみてくださいね。 ■目次 1.グロースハックについて 2.Kaizen Platform Inc.とは 3.グロースハックに興味がある人必見！グロースハックを学ぶためのオンライン動画授業5選 1.グロースハックについて （引用：200以上のWEBサービス事例から見えてきた鉄板グロースハック ～傾向と対策 ） グロースハックとは「時間×お金→成長」の→部分の転換効率を上げることです。いかに短い時間で効率的に大きな価値を産むのか。

「スクー人気先生の声」とは？ 今回のゲストは、毎週火曜日22時からレギュラーでWEBディレクションの授業を開講している田口真行先生。いままで数千人以上が受講をしてきた大人気の田口先生に直撃インタビュー！ これほどまでに多くの人を魅了する授業の秘訣、印象に残っているエピソードなど、気になることを全部聞いてみました。 「スクーに出ることは、ずっと夢でした。まさに武道館に立つ！みたいな」 スクー人気先生の声 vol.1 田口真行先生 ー先生は普段どのようなお仕事をされているんですか？ 株式会社デスクトップワークスというWeb制作会社の代表取締役をしています。 ースクーでの放送を始めたきっかけを教えてください。 実はサービスができた当初からずっと、スクーに出てみたかったんです。 スクーが世に出た頃から、本当によくできたサービスだなって思ってました。 私は講師として、全国各地で企業向けのWebディレ

「ネットはよく使うけど、ネットの仕組みを理解していない…」 「Webサイトを作成したいと思ってたけどネットの仕組みがわかっていない…」 そんな方に向けて「Webサイトをネットに上げるためのサーバーについての「超」基礎知識」の授業内容をまとめました。 目次 1. ネットって何？ 2. IPアドレスって何？ 3. URLって何？ 4. サーバーって何？ 1. ネットって何？ ネットは仮想現実の世界です。 ネットとはデータで作った仮想現実であり、仮想現実を覗く窓があると考えてみてください。この場合、その窓とは、WindowsやMacなどのPC、スマートフォン、ゲーム機器などのネットが表示出来るものになります。 イメージはこんな状態です。 （引用：Webサイトをネットに上げるためのサーバーについての「超」基礎知識） リアルの世界が下にあって、雲の中に仮想現実があります。ネットではこの仮想現実の世界

デザイナーが自席に引きこもり、オペレーターとしてチームから独立して作業をする時代は終わりつつあります。

年間250万人近くの方が受けるTOEICテスト。多くの日本企業がこのTOEICの点数を、英語の基礎スキルチェックの指標にしているため、海外志向の強いビジネスパーソンにとって高得点を取得することは、海外で働く第一歩となっています。しかしながら、 「TOEICと聞くだけで、気分が落ち込む。でも、目標のスコアがある」 このようにおっしゃる方は非常に多いです。もしこの状態から脱出したいならば、英語学習コンシェルジュのporpor（ぽるぽる）としてもしられる渡邉淳先生と一緒に集中的に取り組んでみませんか？ ※扱う教材は、コスモピアより出版されている『超リアル模試600問』です。受講される際に同書を用意していただけるとより効率よく学べますので、ぜひご用意下さい ※授業は基本的に自前の予習がなくても受講できるようなプログラムで構成しておりますので、ぜひ気軽に参加してみて下さい ■3カ月でTOEIC200

年間250万人以上の人が受けている英語能力テスト「TOEIC」。受けたけど問題数が多く最後まで解けなかった…なんて経験はありませんか？ そんな方に今回はTOEICを時間内に終わらせるための6つの方法をご紹介します。Reading Sectionの100問を75分でどう解くか、学んでいきましょう。 この記事は菊池 紘子先生による【TOEIC超入門】満点取得者が語る魅力＆24回受けて学んだ時短テクという授業を元に作成しています。 ■目次 1.マークシートシャープを用意しよう 2.リサイクル問題を知ろう 3.TOEICの世界観を理解しよう 4.問題用紙と解答用紙の距離に気をつけよう 5.パートごとの時間配分を決めよう 6.Part7の解く順番を決めよう 1. マークシートシャープを用意しよう 意外と時間がかかっているのが、マークシートを塗る時間。塗る際に普通のシャープペンでなく、「マークシートシ

Webで仕事をする方に愛用されているブラウザ、GoogleChrome。このGoogleChromeは、拡張機能（アドオン）を追加することでより便利に、そして自分好みにカスタマイズすることが出来ます。この拡張機能を上手く使いこなせば、作業スピードを大幅にUPすることが出来ます。こちらの記事ではよりWebデザインの効率化に特化して、作業スピードをUPしてくれる便利なGoogleChromeの拡張機能８個を紹介します。 〈目次〉 ■拡張機能の追加方法 ■拡張機能の紹介 １）ColorZilla　簡単にWebページの色情報を拾える！ ２）User-Agent Switcher　Chrome上で様々なブラウザでの表示をチェック出来る！ ３）PageRank Status  Googleページランクをいつでも一目で確認出来る！ ４）Push bullet　PCとスマホでさくっとデータ同期出来る！ ５

色調補正（レタッチ）とは？ Photoshopには、「色調補正（レタッチ）」という機能があります。色調補正とは、写真全体の色合いや明暗のバランスを整え、撮った写真を綺麗に加工する機能のことです。色調補正機能にはいくつかの種類があり、それぞれ大きな違いがあります。今日は5つの色調補正機能をの違いと使い方をご紹介します。 ■目次 1. Photoshopにおける色調補正の方法 2. 明るさとは 3. コントラストとは 4. 彩度とは 5. 明度とは 6. 露出量とは 1. Photoshopにおける色調補正の方法 今回はこちらの笑顔が素敵な女性の写真を元にご紹介していきます。 写真ファイルをPhotoshopに取り込んだら、上部のタブからイメージを選択し、色調補正を選択します。 2. 明るさとは 文字通り、明るさを調整出来る機能です。天気が曇った日に撮った暗めの写真を、晴れた日に撮った写真のよ

『WordPressをちゃんと使うための教科書』著者、たにぐち まこと先生の授業「WordPressのテーマ制作ライブ授業」で紹介された、企業サイトを作る際に入れておくべきプラグイン5選をご紹介します！ ◆目次◆ 1. 日本語のバグを取り除く｜WP Multibyte Patch 2. 投稿が編集しやすくなる｜TinyMCE Adbanced 3. Google Analyticsを入れる｜Google Analyticator 4. 固定ページをドラッグで移動させる｜Simple Page Ordering 5. マークダウンで書けるようになる｜Markdown on Save Improved 1. 日本語のバグを取り除く｜WP Multibyte Patch https://wordpress.org/plugins/wp-multibyte-patch/ 最初から入っているプラグイ

この記事を読んで美しいレイアウトを手に入れましょう。 「色は統一感があるけど、なぜか配置がうまくいかない…」 「フォントは揃えたけど、写真とのバランスがうまくとれない…」 「良いレイアウト・悪いレイアウトの違いが分からない…」 この記事ではそんな悩みを抱えている方へ向けて、東洋美術学校によるレイアウトのデザイン基礎理論をまとめました。 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】 ■目次 1.あなたはレイアウトセンスあり？なし？ 2.レイアウトとは？ 3.レイアウトの種類（静的・動的） 4.レイアウトの3大原則 5.レイアウトにおける重要なポイント 1. あなたはレイアウトセンスあり？なし？ 以下にチェックポイントを並べてみました。自分にレイアウトのセンスがあるかどうかチェックしてみましょう。 ・苗字と名前の間を全角スペースであける ・和文フォントと英文フォントを並

「WordPressってよく聞くけど何？」 「プログラミングの知識がなくても使えるの？」 「レンタルブログと何が違うの？」 という方のために、WordPressでできること、メリットなどをまとめました。 ◆目次◆ 1. WordPressって何？ 2. WordPressのメリット・デメリット 3. WordPressでできること 4. WordPressの使用事例 1. WordPressって何？ WordPressは、誰でも無料で使うことができる、ブログ作成ソフトウェアです。 このソフトウェアはプログラミングやWebデザインを始めたばかりの人でも、サイトを管理したり、新しい情報を更新したりすることが出来ます。 2. WordPressのメリット・デメリット ＜メリット＞ (1) 自分の好きなようにカスタマイズできる高い拡張性 プログラミングを少し勉強すれば、自分の好きなデザインでブログ

こんにちは！スクー教務課の廣松です。 今回はスクーで開講された授業からデザイナーがUIについて考えるときのコツについてご紹介したいと思います。 UIとは？ ユーザインタフェース (User Interface) は、機械、特にコンピューターとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェースである。(Wikipedia「ユーザーインターフェース」より引用） …うーん、難しい！ 本記事は、UIについての知識がない方から、UIデザインの具体的なコツが知りたい方まで一緒にUIデザインについて理解を深められる内容となっております。Webデザインの第一線でご活躍されているプロによる授業から学んでいきましょう。 目次 1. UIとは何か 2. アプリUIデザインについて 3. 優れたUIとは 4. 優れたUIを考えるコツ「UIをパターン化」してから選ぶ 5. UIデザインを考

「Adobe」知っていますか？ 「字面は見たことあるような・・」 「よくパソコンに出てくるけど何なのかは知らない・・」 「そもそもなんて読むの？あどーぶ？あどべ？」 そんな方はこの記事を読むことでAdobe、そしてAdobeのアプリケーションについて理解を深めることができます。 「 Adobe（アドビ） 」 とは、「Adobe Systems（アドビシステムズ）」の略称で、世界最大規模のソフトウェア会社の名前です。 先頭に「Adobe」がついた多くの種類のアプリケーション を扱っています。 今回は、Adobeの中でも 代表的なアプリケーションを3つご紹介します。 ① Adobe Photoshop （アドビフォトショップ　通称：フォトショ） Photoshopは、写真やイラストを加工し、綺麗に見せる事が出来るアプリケーションです。 何ができるの？ ・写真の修整 写真を使用する目的に合わせて