宮崎のホームページ制作会社Tedinc | Design

menu 0982-60-1084

TEDINC OFFICIAL BLOG

 

今日はロゴ作成の時、参考にしているロゴデザインギャラリーサイトの紹介です。

ロゴはWebサイト、ホームページ制作のキモとなる部分です。

インスピレーションが刺激するロゴは勉強になります。参考にして下さい。

 


logogallery(とりあえずロゴを沢山見たい時にオススメ)


 

logogallery

 

URL:http://www.logogallery.net/

コメント:

Logoが全て正方形で型取られ非常に見やすいサイトです。

サムネイルをクリックすれば、デザイナーとUrlの情報が載っています。

沢山のLogoを一気に見たい時にはオススメです。

 


Logo pond(自分好みのロゴを探す時にオススメ)


 

logopond

 

URL:http://logopond.com/

コメント:

こちらも有名なロゴギャラリーサイトです。

Logo pondの特徴はサムネイルをクリックすると使われている色や、似た色の配色のものが下に一覧で表示されます。

イメージ頭にぼんやりあり、自分がイメージしているロゴデザインをさがしたい時はオススメです。

 


LOGOGALA(色は決まっているけどデザインに悩んだ時にオススメ)


 

logogala

 

URL:http://www.logogala.com/

コメント:

LOGOGALAの特徴は右のサイドバーに14種類のパレットがあり、色を抽出して一覧を表示してくれます。

色は決まっていて、デザインに悩んでいるときなどはオススメ。

 


Logo of the day(ロゴと合わせてWebサイトも見たい時にオススメ)


 

LogoOfTheDay

 

URL:http://logooftheday.com/

コメント:

気にいったロゴがどんなサイトかを見たい時には便利なフォトギャラリー。

サムネイルをクリックすると、そのままLogoをしようしているサイトに移行します。

 


LOGOMOOSE(ロゴデザイナー探しや、購入にオススメ)


 

logomoose

 

URL:http://www.logomoose.com/

コメント:

参考にしたいデザイナーや、購入したい場合に有効なLOGOMOOOSEは様々なユーザーが登録して

自分がデザインしたものなど投稿しているサイトです。

 

 


logo stock(ロゴコンセプトの勉強にオススメ)


 

LOGOSTOCK

 

URL:http://logostock.jp/

コメント:

logo stockは日本語でロゴコンセプトを説明してくれ、わかりやすいサイトです。

運営されている人の努力が伺えます。

デザイナーがLogoにどのような思いを注入して作ったかを知るのに勉強なります。

 


まとめ


 

ロゴは企業やWebサイト、ホームページを表す象徴です。

沢山いいものをインプットして、いざ自分でデザインする(アウトプット)時に約立ちます。

ぜひ参考にしてみて下さい。

 

デザインのテンプレートは様々な物がありますが、今回は以前紹介したBootstrapのテンプレートを集めたサイトを紹介します。

今回は無料のテンプレートを中心に有料でも安価なテンプレートを紹介しています。

ダウンロードも簡単です。

Bootstarpとは?

Bootstrapは、マルチデバイスに対応したレスポンシブWebサイトを簡単に構築するための

「CSSフレームワーク」

です。

過去記事:Bootstrapをしっかり理解したい為の記事

 


startbootstrap


 

 

startbootstrap

 

URLhttp://startbootstrap.com/

コメント

ダウンロードまでが簡単で、登録などなく、そのままダウンロードして使えます。シンプルな英語でタイトルがつけられているので、用途に合わせたサイトを簡単選べます。

Preview & Downloadから気に入ったテンプレートページに飛んでダウンロードをクリックすればOK。

 

 


shapebootstrap


 

shapebootstrap

 

URL:https://shapebootstrap.net/

コメント

こちらは有料な物もありますが、無料もあります。

無料テンプレートURL:https://shapebootstrap.net/free-templates

有料の物でも$15~なのでめちゃくちゃお安いです。無料のテンプレートは登録など何もなしで簡単にダウンロードできます。

サイトのクオリティが高くスライダー、パララックスもそのまま無料で使える優れ物もあります。

 


wrapbootstrap(有料 $4〜)


 

wrapbootstrap

 

URLhttps://wrapbootstrap.com/

コメント

こちらは有料になりますが、$4〜で一番高くても$30くらいです。(ちなみに$30はかなり作りこまれているサイトで、日本円で約3500円くらいです。)

少しお金をを出しもいいからという人にはオススメです。

 


まとめ


 

いかがでしたか? 以前の記事でもBootstrapをオススメした理由を書きましたが、

Bootstrapは、マルチデバイスに対応したレスポンシブWebサイトを簡単に構築するための「CSSフレームワーク」

です。

Webサイトに一番必要なものは、コンテンツや機能性です。つまり一番時間をかけなければいけない項目でもあります。

Bootstrapを使えば、Webサイト構築(デザイン・レスポンシブなど)の時間が短縮され、より中身(コンテンツ)にこだわったサイト制作できます。

そして、様々なサイトで提供されているテンプレートを使えば簡単にカッコよく機能性の高いサイト制作ができるであろうと思い紹介しました。

よければ参考にしてください。

こんにちわ。Tedincの林田です。

Web制作(htmlやcss)や開発では必須となるテキストエディタ。

自分に合ったより便利な物を使う事が作業効率を高めます。

そこで、友人に勧められた

Sublime Text

を紹介したいと思います。

制作に携わりながら、より良いエディタを探し求め生涯これを使い続けようと最近決意しましたw

その理由はふんだんにあります。というか、現段階(2015年8月)でめちゃめちゃ人気のあるエディタです。

 

理由1:魅力的なUI。

 

ui



理由2:便利なショートカット機能が沢山ある。

(commandを使った便利すぎる機能の例)

commandキーを押しながら、複数ヶ所を同時に選択して編集することができる機能。

command + L  command押したままLを連打で次の列も選択できる機能。

command + クリック   任意の場所にカーソルを置き、異なる単語を同時に修正できる機能。



理由3:様々なプラグインが用意されいる。
(Package  Control)

Sublime Textの魅力はPackage  Controlというプラグインを導入すれば様々な便利なプラグインを導入する事ができます。

Package Controlのインストール方法

1、下記のリンクをクリックして、パッケージコントロールのインストールページを開きます。

Package Controlのインストール

 

2、Sublimetext2とSublimetext3が並んでいるので、利用しているバージョンのコードをコピーします。

 

3、Sublimetextを開き、Ctrl + ‘(バッククォート) を押し、コンソールを開きます。

 

4、先ほどコピーしたコードをペーストし、Enterでインストール完了です。

 

Ctrl + Shift + P でPackage Controlが開きます。そこから必要なプラグインを入力し選択すればプラグインがインストールされます。

 

様々なプラグインは色々記事が出ていますので参考にして下さい。

 

Package Controlのプラグイン参考記事一覧

特におすすめしたい、Sublime Textのパッケージ

WordPress開発がサクサク捗るSublime Textおすすめパッケージ27個まとめ

Sublime Textに導入しているオススメのプラグイン23選

 

まとめ

テキストエディタは無料から有料のものまで沢山ありますが、悩んでいてWebサイト作りやシステム、アプリ開発などを本気でやっていこうと考えいる方にはオススメです。

備考

ちなみにSublimeTextは有料《1ライセンスでUSD $70(約8400円)》で、SublimeText2は無料で使う事ができます。

色んな方がオススメしているSublimeText是非使ってみて下さい。

こんにちは、Tedincの林田です。

今回は2015年の春夏のトレンドカラーを紹介します。

ホームページやWebサイトの色で悩む事は多々あるかと思いますが、私は今年の流行の色などを検索して参考にしています。

ファッション業界は色を大事にしている業界ですし配色の組み合わせの勉強にもなります。

 

2015年トップ10はパステルカラー(中間色)。春夏の定番「海色」が上位

記事抜粋

レアトリス・エイズマン=パントン・カラー・インスティチュート エグゼクティブ・ディレクターは、「今シーズンは、いつも以上にウケる理由がある」と話す。それは、デジタルデバイスがもたらした“24時間働けますか?”的な日常生活からのエスケープ願望。「携帯電話にメール、そしてテキストメッセージ。人々は、こんな生活から一瞬でも解放されるため、開放的な色を好みそうだ」と分析する。

参照

【コラム】2015年春夏“海色”がウケる理由

 

 

2015 trend color palette

 

まとめ

今回選択されている色は春夏用のファッションショーなどで使われたWOMAN用の配色です。

パステルカラーはフラットデザインとの相性も良いですね。

MENS用の配色もありますが、私個人の意見としては、色に関してのセンスはやはり女性の方が際立っいると感じているためWOMAN用の配色をパレットにしてみました。

(理由:女性は毎日化粧をする事で、常日頃から色と直面している為)

ホームページやWEBサイトの配色に悩んだ場合は参考にしてみてください。

 

こんにちはTedincのteruです。

 

年の瀬の忙しい時期に差し掛かり、1年の速さに悲しさを覚える昨今です。

 

今回のタイトルは

 

Webとは?ホームページとは?を考えさせられたWebSite

 

ですが。

 

幸い私は、常に刺激をくれるWeb事業主さんと仲良くさせて貰っており、自分の仕事を指摘して頂いたり、時には自分の意見を言わせて頂いたりと・・・

 

ホームページ制作の仕事が楽しく、より良い仕事にしていこうと二人で語り合っています。

 

大きいテーマが1つ

 

このホームページ制作というものは・・・・?

 

この中に実は様々要素が含まれており

 

デザインの良さ。

 

クライアントの使いやすさ。

 

SEOの検索順位など。

 

様々な観点でどうあるべきかを週2、3度のディスカッションが行われるのですが、そんな彼から1つのWebサイトを教えてもらいました。

 

ものすごくシンプルなものです。

 

原文 これはウェブページです。

 

この著者(ジャスティン・ジャクソン)の意図は直接このサイトを見る方が伝わりますので時間がある方は見てみて下さい。

 

しかし沢山の人に見ていただけたらと私はどうしても思ったのでそのまま全文を抜粋します。

 


 

これはウェブページです。

たいしたページではありません。

あるのは言葉だけ。

それをあなたは読んでいます。

オシャレなデザインや、レスポンシブなレイアウト、魔法のようなスクリプトに私たちは魅了されてしまいました。

でも、ウェブで一番強力な道具は、今も昔も言葉です。

私が書いた言葉を、あなたが読んでいる。これこそ魔法です。

私はブリティッシュコロンビア州の小さな都市にいますが、あなたは別のどこかにいることでしょう。私は2013年6月20日の早朝にこれを書きましたが、あなたは違う日時にこれを読んでいることでしょう。私はノートパソコンでこれを書きましたが、あなたは携帯電話でこれを読んでいるかもしれないし、タブレット端末やデスクトップ端末で読んでいるかもしれません。

私とあなたがこうして繋がることができたのは、私が書いた言葉あなたが読んでいるからですウェブとはそういうものです。場所や端末、タイムゾーンが違っても、このシンプルなHTMLページで私たちは繋がっています。

私はテキストエディターでこれを書きました。全部で6KBです。コンテンツ管理システムも使わなかったし、グラフィックデザイナーやソフトウェアディベロッパーにも頼みませんでした。使われているコードも多くありません。段落や構成、強調といったシンプルなマークアップのみを使っています。

娘は8歳のときに私からHTMLを学びました。一番最初に彼女が書いたのはリスの物語でした。彼女は「HTMLを書いていた」のではなく、世界中に何かを伝えようとしていたのです。家のコンピューターで物語を書き、それを世界中に公開できるなんて、彼女には信じがたいことでした。娘にとってはHTMLなんてどうでもよく、物語を伝えられればそれでよかったのです。

あなたはまだこのページを読んでいます。

シンプルなページでも、伝えられることはたくさんあります。もしあなたがビジネスパーソンならば、何かを売ることができるでしょう。あなたが先生ならば、何かを教えられるかもしれません。あなたがアーティストであれば、自分が創ったものを見せることができます。そして、あなたが上手く言葉を使えたら、人々はそのページを読んでくれるでしょう。

もしあなたがウェブデザイナーか、ウェブデザイナーのクライアントなのであれば、まずは言葉から考えてみてください。スタイルガイドやフォトショップのモックアップからではなく、言葉から始めるのです。

伝えたいことは何ですか?それがなければ、余計なパーツをつけるのは無意味です。伝えたいことを一つだけ考えて、それを一つのページに落としこんでみてください。公開した後でも、推敲を重ねてみてください。何かを足したいと思ったときは、「これを足すことによって、伝えたいことがもっとハッキリするだろうか?この書体や画像、リンクは読み手の理解を助けるだろうか?」と自分に聞いてみてください。もしも答えが「いいえ」であれば、足す必要はありません。

ウェブデザインの本質は、言葉です。言葉は、デザインをした後に考えるものではありません。言葉はデザインの始まりであり、中心であり、主役なのです。

言葉から始めましょう。

それでは。
ジャスティン・ジャクソン

 


 

 

 

Webとは?ホームページとは?・・・・・

 

つまりそれは

 

言葉をしっかりと伝える為のツールでなくてはいけないという事です。

 

私は少し長めのこの文章を全て読みました。

 

そして言葉に強烈インパクトがありました。

 

このウェブサイトをが何が言いたいを伝える為のウェブデザインだったからです。

 

ターゲットもしっかりと考えられたデザインです。(これはホームページ制作者向けに作られたサイトです。)

 

Tedincではクライアントが本当に伝えたい言葉を伝えられるホームページ制作を行っていきます。

 

 

 

こんにちは宮崎でWeb Site制作を行っているtedincのteruです。

 

GLAYが売れて結構立ちますが、彼らが売れてから自分の名前をteru(本名:旭洋[テルヒロ])と書いた後に少し照れてしまう自意識過剰な自分を来年こそは捨て去るとさっき自分に誓いました・・・・

・・・・

・・・

・・

どうでもいい話はさておき、年の瀬もあり来年[2015年]のウェブデザイントレンド予想を見ながら自分の見解、対策を書いていこうと思います。

 

原文はこちら

PREDICTIONS FOR 2015 WEB DESIGN TRENDS

 


1:Flat Design


 

flat

 

この記事によれば、

テクスチャ、パターン、影、泡、グラデーションはもはや時代遅れとの事

 

フラットデザインとは、

 

質感や立体感がほとんどない

エフェクトは最小限

文字も最小限

目的や商品が一目でわかる

部品の機能が一目で分かる

各要素がくっきりしている

グラデーションを使わない

シンプルなタイポグラフ

シンプルなグリッドレイアウト

 

最近はApple、Windows8などほとんどの物がフラットデザインに成り代わりましたね。

フラットデザインの良い所はなんといっても、デバイスが変わる事によってのデザインのズレのストレスがかなり軽減されることです。

自分の対策としては、前に書きましたBootstrapなどを取り入れてく事で、レスポンシブデザイン&フラットデザインの両方を取り込んでいこうと思います。

 

Bootstrapをしっかり理解したい為の記事

 

少し危惧する所は、立体型だったいままでのデザインよりデザインの差がつけにくくなった気がします。 自分達のようなWeb自体を制作する人間にはわかるデザインの違いが、一般の方々(Webを使う方の人々)には安っぽさの方が先に来てしまうのではないか?と少し感じています。

これからデザインは、人とは違う視線から、人とは違うアイデアがより重要となりそうですね。

 


2:Less Clicky, More Scrolly


 

コンテンツをページごとに断片化するのではなく1ページの中でスクロールさせるデザインにしていくとよいと書かれています。

これは、やはりモバイル、タブレットで見た際のストレスを減らす事になると書かれています。

sony(US)

ソニーの海外版のサイトのスクロールは最早webとは言えない鮮やかで迫力のあるスクロールデザインになってます。

 

 


3:We say, “Responsive,” You say, “What?”


 

この記事でかれらは言っている事は、

「モバイル、モバイル、モバイル!

それは2015年に、モバイルインターネット利用は、従来のラップトップおよびデスクトップを追い越すだろう」

と予測をたてています。

 


4:Typography is King


 

この記事によればタイポグラフィックアートが主流に向かって高速で軌道に乗っているとのこと。

フラットデザイン自体が文字がより際立つサイト構成だと思いますし、文字で遊び心がだすアイデアは当然増えていくと思います。

 


総括


 

傾向としてはモバイルの爆発的な普及に対するここ数年の答えが決まったように感じました。(もちろんまだまだ変化はしていくと思いますが・・)

フラットデザインにしても、どのデバイスで見てもどうやって同じように見せるかというweb業界自体の回答に思えます。

イマジネーションをどうサイトに反映していくかはデザインの差別化をする為の重要なファクターになっていきそうですね。

 

 

 

 

 

bootstarap

 

こんにちは。tedincのテルです。

友人に薦められた「Bootstrap」を導入したのですが、イマイチどのくらいの便利なのかが理解できていなかったので、書いていこうと思います。

Bootstrapにあるiconはサイトに統一感ができるし、タグ一つで呼び出せるので便利だ・・・・

と思っていた自分に、このような記事を見つけました。

 

ウェブサービス開発の現場におけるデザイナー不要論と5〜10年後の生存戦略

 

この記事の中に


ウェブデザイナーの仕事がエンジニアによって奪われつつある

 

ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア/プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。

象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作ったりしてくれるだけでいいよね」と考える企業が増えつつある。


 

・・・・・

もっと深く理解しなければ(汗)

 

まずはBootstrapとは?

 


Bootstrap


 

Bootstrapは、マルチデバイスに対応したレスポンシブWebサイトを簡単に構築するための

「CSSフレームワーク」

です。

Bootstrapであらかじめ用意されたフレームワークに則り、UI部品を組み合わせると、フラットデザインをベースにした、見栄えの良いフロントエンドの開発ができます。そのため、開発工数を大幅に削減できるだけでなく、デザインが苦手なエンジニアでも、ユーザビリティの高い画面の開発が可能になります。

前述にあった

Bootstrapがあればデザイナー不要

=デザインが苦手なエンジニアでもユーザビリティの高い画面の開発が可能

Bootstrap

 

これはCSSとHTMLの事を理解できていれば、本当に誰でも綺麗なデザインのサイトができちゃいますね。

 


まずは設置方法


 

1、まずBootstrapのトップページからファイルをダウンロードします。

2、自分のサイトの中に導入、headの中に記述してパスを通します。

 

css

<link rel=”stylesheethref=”bootstrap.css” type=”text/css“>

 

js

<script src=”bootstrap.js” type=”text/javascriptcharset=”utf-8“></script>

 

icon*注意*

Bootstrapにあるiconを使いたい場合はcssのファルダのディレクトリと同じ場所にfontを設置して使えるようになります。

bootstarap3

 

Bootstrap 3 からiconは切り離されたとのことです。Glyphicons のサイトから Bootstrap 3 用のicon集をダウンロードして設置します。

参考記事:Twitter Bootstrap 3 でアイコンを使う方法


使い方


BootstrapのメニューからComponentsのページへ進みます。

bootstarap2

サイトを構成してる様々な要素がBootstrapにはあります。(icon,buttom,nav….etc)

bootstarap4

自分はデザインに差をつける為、また強調したい文章などにiconは必須なのでいつも画像でやっていましたが、これがあれば簡単に、しかも統一性のあるiconが使えるので非常に便利と思って使っていたのですが、

何が一番素晴らしいという、と

 

レスポンシブWebレイアウト

 

Bootstrapでは場合、グリッドの列数は12に固定されています。そして、col-xs-1, col-xs-2のように「横に占める列数」を名前に含むクラスがBootstrapによって提供されています。これらのクラスをブロック要素に付与していき、要素が占める列数の合計がちょうど12になるようにレイアウトしていきます。

抜粋(Webアプリをあっという間にカッコよく! BootstrapによるレスポンシブWebレイアウト

 

これを取り入れることによって様々なデバイスから見たときのレイアウトの心配がかなり軽減されます。

 

さらにBootstrapは最近ではAppleも取り入れているフラットデザインをベースにしたサイトが基本となっています。

 

 


総括


 

これからはサイト構成の指針となるであろうと感じられる物ですね。

前日にGoogleの社長、ラリー・ペイジが

これからはさらにコンピューターの発達で、今人が行っている作業の8割くらいが機械によって行われていくだろう。イマジネーション持たない人たちは仕事がなくなる・・・

といった記事を見かけました。

Webの中の様々な変化には日々驚かされますが、より強い想像力を発揮し、自分の仕事に取り組む姿勢は忘れてはいけませんね。

 

こんにちは。秋です。日本のことわざに「秋高く馬肥ゆ」というのがあります。意味は「秋は空気も澄んでいて、空も高く感じられ、馬も肥えるような収穫の季節でもある」・・・・ なるほど太り過ぎに注意って事だな・・・ と感じている今日この頃です。
抜粋:http://kotowaza-allguide.com/a/akitakakuumakoyu.html

今日は自分がデザインのアイデアなどに悩んだときにお世話になっている参考サイト一覧のWebSiteを紹介したいと思います。新しいもの、新しい技術などの勉強にもなります。よろしければ参考にして見てください。

 


Design Link Datebase


 

designlinkdatabase

 

 


bookma! v3


 

bookmav3

 

 


WP DESIGN GALLERY


 

wpdesigngalleery

 

 


I/O3000


 

io300

 

 


イケサイ


 

ikesai

 

 


 Web Selction


 

webselection

 

 


週刊Web Design


 

weekweb

 


ズロック


 

zrock

 

 


Good Web Design


 

goodwebdesign

 

 


WONDER BOOKMARKS


 

wonderbookmarks

 


総括


 

今回は国内のコンテンツのみをピックアップしました。自分がこの仕事をはじめた頃は海外のサイトに比べると革新的なWebSiteは少ないなと感じていたのですが、最近では自分のアイディアや個性をサイトにしっかり取り入れたり、会社をブランドしてあげようとする意思をもったサイトが沢山見受けられるようになりました。いいものを深く見る事は、すべての事に良い影響を与えます。参考にしていただけたら幸いです。

 

 

CONTACT US

お気軽にお問い合わせ下さい

お問い合わせはコチラ