fc2ブログ

新装、星屑コンテンツSun Eternity:追記

リニューアル

当ブログを回覧していただいている皆さん、こんばんわ

当サイト「Sun Eternity」のホームページ
「星屑コンテンツ Sun Eternity」がリニューアルされました!詳細は続きから

【はじめに】


今回、ホームページ「星屑コンテンツ Sun Eternity」をリニューアルした理由は、
Firefoxなどのその他のブラウザで回覧しますと、ホームページのデザインが
壊れてしまう・・・という不具合を修正するために手をつけました。


しかし。。。不具合を修正しようとして思ったのです。


どうせ。。。不具合を改善するだけなら
ホームページそのものを一から作り直してリニューアルしてみてはどうだろうか?

というわけで、今回のホームページリニューアルとさせていただきました。




【比べてみよう】

とはいうものも、
いきなり「ホームページをリニューアルしました!」といわれても

昔のホームページを知らない人は、いまいちイメージがつかめないと思います。
(一応ずっと前から、右上にリンクがあるんだけどね;;)

ですのでここに、昔のホームページのイメージ画像を用意致しました。


Before


上記のホームページはほとんどテーブルタグにて構成されていたため、
ウィンドウサイズを縮めるとセンターのテーブルが下に落ちてしまったりという
レイアウトの壊滅を促してしまう物でした。




After

これに関しては、写真で見るより
実際に見た方が早いと思うので、リンクを用意しました。

星屑コンテンツ Sun Eternity


どうでしょうか?ちゃんと表示されているでしょうか?
自分は「IE7」 「オペラ」 「Firefox」にて回覧を確認しました。







~後書き~

ふぅ~~~~~~~~~、疲れた~~~~~~~~~~

とにかく
何が一番大変かというと、初めから全てデザインを作ったので、
とても時間がかかってしまいました。

なんといっても、時間がとてもかかったことが一番疲れる原因の一つですね。

あとは、使い慣れていないフラッシュなどを挿入したり、
どのブラウザでもレイアウトを整え、固定するためにCSSを調整したりという・・・

なんだか、いろいろやったため何をやったか覚えていません^^;

あっ、ちなみにですが今紹介したホームページは、
フラッシュが再生されなくても、ちょうどよく回覧されるようになっています。

フラッシュがなくても、たぶんデザイン&機能に不具合はないと思います。

出来については。。。あえて言及は致しません。
どうしても、自分が作ったものは主観が入ってしまうため^^;


回覧に対して、何か不具合OR回覧がうまくいった、などがありましたら
報告、よろしくお願いします。

何分、まだまだ作りたてのホームページのため不具合が多いと思いますので、
報告していただければ、本当に嬉しいです。^^

それでは、今後ともSun Eternityを宜しくお願い致します。








追記:

とりあえず、イメージカラーはオレンジに統一すると、決心致しました。

それにしても、デザインは本当に難しい・・・
こればかりは、良いか悪いかの答えなんてでません、
しかし、このデザインの追求もまたデザインの楽しみですから不思議なものですね。

今回の改善点は
大体、バーのイメージカラーをオレンジ景色にしたため、少し違和感が
減ったと思います。

ロゴに関しては改善はまだですが、とりあえず違和感が少ないように
文字との間を詰めてみました。

どうでしょうか?感想をいただければ幸いです。

星屑コンテンツ Sun Eternity




【スクリーンショットも取ってみた】

コメント

えぇEEEEEEEEEEEE!!!!!

これは・・・

・・・・・・・・・・・・・・・・・・

・・・・・・・・・・・・・・・・・・

・・・・・・・・・・・・・・・・・・

・・・・・・・・・・・・・・・・・・

・・・・・・・・・・・・・・・・・・

・・・・・・・・・・・・・・・・・・

かっこいい・・・・・・・・・

・・・・・・えぇぇえ!!!

ちょwwwwwwwwww

・・・・・・・・・・・・・・・・・・

真剣に、しびれました。

これはレベル高すぎですよ・・・。



一言:イイ\(^o^)/


個人のホームページとしては、かなり高いレベルのものですね。
IE6でもレイアウトは全然崩れていないですしね。

自分もホームページを作ってみたいと前々から思っていましたが、
作り方が全然わからないですw

暗黒の鬼神さんは本当に知識や技術の幅が広いですね~。

メニューにフラッシュが使われているようですね。自分はフラッシュとか
何も分からない初心者なので、こんなすごいものは作れないです・・・。

はぁ~、、いや~、、、最高ですね(・∀・)

そういえば、いつの間にかホームページのほうもPR2になってる・・・。

暗黒の鬼神さんはいろいろと、すごいことだらけです。。。

No title

なんかすごすぎて・・・

ほんとに鬼神さん?
奇人になってるよ。・゚・(ノД`)

本当に・・・

>アンタレスさん

>個人のホームページとしては、かなり高いレベルのものですね。

うぅ。。。そういっていただけるなんて・・・;;(感動)
本当にありがとうございます!

苦労して作ったかいがありました^^

ホームページ制作ですが、アンタレスさんぐらいの
知識とブログのデザインセンスが
あるなら、簡単に作れると思います。

アンタレスさんのほうが恐らく自分よりCSS関連の
記述の知識は高いと思います。

ホームページよりブログの方が作るのは難しいですし、
あれぐらい、自由自在にカスタマイズできるのでしたら
ホームページ制作はアンタレスさんなら十分できます。
断言してもいいですよ!


>IE6でもレイアウトは全然崩れていないです

おぉー!崩れていませんかー
よかった~~(ほっ)
一応、全ブラウザでレイアウトが崩れないように制作しましたが、
それでもIE6は不安材料でしたね。

IE6でのPNG処理は画像編集ソフトの「Pixia」に今回は
大きく助けられましたね。
いや~、本当にツールは素晴らしいと
また改めて実感しましたよ^^

PNG処理のほうは画像編集を駆使して、
合成し、JPEGに変換してCSSからアイコンを貼り付けました。

IMG画像をCSSでコントロールするのは本当に大変ですね~
位置がずれたりして本当に大変でした。

>そういえば、いつの間にかホームページのほうもPR2になってる・・・。

そういえば、、、2⇒0⇒2とまた戻りましたね。
ウェブマスターツールにて、認証タグが外れていて、
検索エンジンに弱くなっていたのが原因かもしれませんね。

あと、フラッシュは
http://naturalbreeze.cside.com/
(感謝リンク張り忘れてた)

上記にて、取得した物を画像を挿入したりして、
作りました。

時間が空いたら、フラッシュ制作もやってみようかな~
と思ってます。

今のフラッシュでも十分満足なのですが、
やっぱり、こういうのは自分で作ってみたいんですよね~^^

そんなこんな、アンタレスさん
今回の報告本当にありがとうございました。




>kinngyoさん

ありがとうございます~^^

>なんかすごすぎて・・・

そうですか~、すごいと思われたのでしたら、
今回の自分のホームページ制作のイメージにぴったりと
あいますね。

自分の今回のホームページ制作のイメージは
「壮大」かつ「繊細」に「美しく」というテーマでしたから^^
(なんか、イメージ相反してね?)

なんだか、作成しているうちに、イメージを作っていて
それを組み合わせていって出来たという感じですね。

一応、ど素人の自分が頑張ってみました^^;

自分のような素人が制作した物でも
そういって、いただけるなんて本当に感激です^^

それではkinngyoさん、ありがとうございました!

No title

うへぇぇぇ
何だ・・これは
「復帰後HP作ってみようかなw」とか言っていた私を許して下さい

アドバイス?余計な口出し?

Sun EternityのロゴがHPそのものにマッチしない気が・・
イメージが・・崩れてるかな・・と・・


口出しできる立場じゃないんですがね・・orz

おー

>mxさん

コメントありがとうございます^^

>Sun EternityのロゴがHPそのものにマッチしない気が・・

おー、よく気づきましたね~^^
実は、それは自分も気になっていたんですよ。

コレに関しては、自分のサイトのイメージカラーを統一
できなかった、自分の未熟さが起因しています。

初めに作成するときは、サイトのイメージカラーはオレンジ
だったのですが、制作しているうちに、青なども入れてしまい
そこで、イメージが崩れてしまう原因となってしまいました。

さてさて、ここで困った問題が起こります。
イメージカラー自体を青に変更してしまいますと、
今度は大幅な修正を加えるとともになります

今回の事態は、イメージカラーはオレンジにしたいという自分の
思いが自分の中で同居してしまい、このようにカラーが統一
できない事態になってしまったんですね。

解決方法に関してはざっとみて二つ

一つは

・オレンジをあきらめ青で統一してしまう
(なんとなく悔しい)

二つ目

・背景にオレンジが合うロゴまたは背景を探し、
サイトのイメージカラーの均一を取る
(自分としてはこれが良い)

なのですが、正直青主体のデザインというのは
かなり多いんですよね・・・

大手のヤフーやMSNなんかでも主体色が青ですし、
このSun Eternity自体イメージが陽ですし、
なんとなく、青で統一するのは自分の中で悔しいものがあります。

なので、考えると結構複雑です・・・

どちらにしても、まだまだ未完成な状態ですので、
よりよくなるように改善したいと思います。

あと
>口出しできる立場じゃないんですがね・・orz

ということですが、
遠慮なんてしないで、どんどんアドバイスしてください^^
自分としては、たくさんのアドバイスを取り入れてよりよくして
いきたいので、本当に正直なアドバイスというのは
かけがえのないぐらい重宝できるものですよ^^

mxさんの正直なアドバイスについて、コチラが
感謝したいぐらいです。

それでは、アドバイスありがとうございました^^

No title

オレンジにロゴの青というのが、非常にいいと思います。青主体の場合、オレンジ系等がアクセントに、オレンジ主体の場合、青がアクセントになりますからね。

CSSメニューについても、とても良い出来だと思います。フラッシュもなじんでいますし。全体的な「色」「構成」として良い出来ですね。

lolifoxで観覧したときに、「更新内容」のテーブルが若干横にはみ出しているという点はありましたが、所詮シェアが低いブラウザを使用している者の意見としてお聞きください。

確認・・・

>AMA@さん

報告、ありがとうございます。

う~ん、、、自分もlolifoxをインストールして回覧してみたのですが、特に、レイアウトが崩れるようなことはなかったですね。

ですが、フレームに関しては自信がなかったので、CSSの記述で
ホームページは右カラムが13em相対指定なのですが、フレームではpxの絶対指定、となっていたんですよ。

どちらにしても、相対指定に対して絶対指定ではいずれ
拡大したときに、崩れる可能性があるため、
今回の修正でフレームの横ウィンドウの大きさを13emの相対指定にして、改善させていただきました。

多分、これで拡大したときや縮小表示の時も崩れずに
すむと思います。

後、align=leftという風に、一応フレームの位置を指定して、
見ましたが、多分他のブラウザでも崩れることはないと思います。

それと、フレームの中の文字のレイアウトですが、
アレはまだ整えていないため仕様となっています;;

今回、フレーム内の文字が少々自己主張が強いような気がしたので、フレームのボーダーをなくし文字を薄く変えてみました。

大体、修正は終わりましたがちゃんと回覧されているでしょうか?

一応、lolifoxにて自分も回覧してみましたが、
レイアウトはちゃんと表示されていました。

宜しければ、AMA@さんの現在の回覧状況も、
ご報告、頂ければ幸いです。


~lolifoxについて~

lolifoxですが、思ったよりlolifoxはデザインいいですね?^^
回覧も結構さくさく動きますし、オレンジの
レイアウトがまたいい感じです。

自分はlolifoxのことをFirefoxのアドオンか何かだと思っていましたが、lolifoxというブラウザ自体が存在していたんですね~

あと、キャラクターデザインがキュートな感じでいいですね^^

とりあえず、lolifoxにも恐らく今回の修正で正式対応
したと思います。

>所詮シェアが低いブラウザを使用している者の意見

例え、低いシェアだとしても、自分としてはできるだけ多い人に
快適に回覧してほしいですから、
このような意見は大変重宝できますよ^^

そんなこんなで、AMA@さん
今回はご報告ありがとうございました^^

No title

先ほど観覧したところ、問題なく表示されていました。やはり、環境によって、ページ表示はここまで左右されるのですね・・・。教訓になりました。

lolifoxは、Firefoxを捨ててまで乗り換えたものです。デザインだけでなく、表示も早いのでお気に入りのブラウザです。

No title

コメントありがとうございました。

確かにtを補完する機能って難しそうですよね・・・
プログラミングをやったことないのですが、大体想像がつきます。
その候補の物が本当にアドレスなのかの判断なんて難しいですよね;;

話は変わりますが、HP拝見させていただきました。
flashを使っているのに感動しました。
あれは、暗黒の鬼神sが一から作ったのですか?

すばらしいのですが、少し言うとすれば、
・トップ絵が少し大きいということ(私の様に画面が小さいPCだと
、一度スクロールしないとコンテンツに飛べません。)
・こちらはあくまで提案なのですが、
例えば当サイトの概要を見たときに、全く別の状態で開くのではなく、中央の欄に表示させてみてはどうでしょうか?個人的にはそちらのほうがよい気ががします。(詳しいやり方は知りませんが><)

少し書きましたが、とてもよいものだと思います。
頑張ってください!


私が受験で忙しいためほとんど更新できていないtoolcaseですが、このようにコメントだけでも返しますので、今後とも宜しくお願いします。

なるほど・・・

>AMA@さん

回覧報告ありがとございます^^
ちゃんと表示されてましたか~よかったーー・・・

環境によって、本当に左右されますよ。
特にIE6あたりとかは、本当に制作時に気を遣います。

lolifoxは、デザインだけでなく回覧も素早いですから
AMA@さんが
Firefoxから乗り換えてまで、使用してた理由が納得ですね。

それでは、報告ありがとうございました^^



>Xx凡骨xXさん

凡骨さん、コメントありがとうございます。

>flashを使っているのに感動しました。
あれは、暗黒の鬼神sが一から作ったのですか?

いえいえ^^;違いますよ。

それにしても、
フラッシュが意外なまでに好評なようですね、
フラッシュの方は自分が作成した物ではなく、フリーの素材を
使わせていただきました。
ですが、時間ができたら自分専用のフラッシュも制作してみたいですね。
こういう、制作物っていうのは気分の問題でもありますから^^

やっぱり、一から作ってみたいという思いもありますね。


提案の方ですが
>・トップ絵が少し大きいということ(私の様に画面が小さいPCだと
、一度スクロールしないとコンテンツに飛べません。)
・こちらはあくまで提案なのですが、
例えば当サイトの概要を見たときに、全く別の状態で開くのではなく、中央の欄に表示させてみてはどうでしょうか?個人的にはそちらのほうがよい気ががします。(詳しいやり方は知りませんが><)

ということは、要約すると小さい画面の解像度でも
簡単に表示されるようにしてほしい、ということですね?

確かに、これは盲点でした。
自分の場合は画面の解像度は1024x768を中心として制作しました。
ですので、解像度の小さいPCでは大きすぎるというのは
気づきませんでしたね。。。

となると。。。

恐らく凡骨さんのPCディスプレイの解像度は
800×600だと思われます。

800×600の解像度にて回覧している方は
現在のインターネット業界のシェア率の5%未満なのですが、
やはり、対応した方が良いのにはかわりはないので、
今回の改善にて改良させていただきました。

今回の改善はjsスクリプトにより
画面の解像度を判定し、CSS別に読み込む表示を変えると
いったものに仕上げました。

具体的にどうするかと言いますと。

~~jsスクリプト~~

/*画面解像度別にCSSの記述を変えるjsスクリプトです*/

function changeCSS(sURL){
var obj = document.getElementsByTagName("link");
for (var i=0, cnt=0; i<obj.length; i++)
{
if (obj[i].type == "text/css") obj[i].href = sURL[cnt++];
}
}

myW = window.screen.width;
if((myW) < 900){changeCSS(['切り替えたいスタイルシートURL']);}
//もしも画面解像度:横が900pxより低ければ上記のCSSファイルを適用

~~jsスクリプトEND~

というような、感じで拡張子jsのファイルを作成して
ウェブ上にアップロードします。

そしてHTMLのヘッダー内にて

~~HTMLヘッダー内~~
<!--▼jsスクリプトでの判定解像度CSS切り替え表示▼-->

<link href="<%css_link>" type="text/css" rel="stylesheet" media="screen,tv" title="default" />
<link href="切り替えたいスタイルシートURL" type="text/css" rel="alternate stylesheet" media="screen,tv" title="width" />
<script type="text/javascript" src="最初にアップしたjsスクリプト「拡張子.js」"></script>
<!--▲jsスクリプトでの判定解像度CSS切り替え表示▲-->
~~HTMLヘッダー内~~



というような、感じにすれば
解像度 横900PX以下の画面では800×600専用の
スタイルシートが適用されますので、凡骨さんが自分のホームページを回覧されると、専用の
スタイルシートが読み込まれると思います。

800×600専用のスタイルシートの変更点は
文字と文字の間を詰めてトップロゴの表示を削り
フラッシュのメニューを上に持ってきました。

なので、今回の改善で800×600でも正式に表示されるように
改善致しました。

もちろん、上記のjsスクリプトは
(myW) < 900の部分を(myW) >1100
などという風にすれば、今度は横1100px以上のディスプレイでも
新しく作ったCSSを指定するとそのCSSで回覧できるようになります。

上記のような簡単な設定となっていますので、
是非、凡骨さんも一度試してみてはいかがでしょうか?

他にも、ブラウザごとに切り替えたりという設定もあるのですが・・・

長くなるので、今回はこのへんにしたいと思います。

それでは、凡骨さん
今回の参考意見、ありがとうございました。

>私が受験で忙しいためほとんど更新できていないtoolcaseですが、このようにコメントだけでも返しますので、今後とも宜しくお願いします。

受験、頑張ってくださいね。
それでは
こちらこそ、今後とも宜しくお願い致します。

No title

確かにそれが良いかもしれませんね。
○技shop ○○さんのような感じで。
一番上にフラッシュ、とか。

思い切って画像を縮小するのも良いと思いますがw

ふむふむ・・・

>mxさん

なるほど、そういった考えもありますね。

>○技shop ○○さんのような感じで。
一番上にフラッシュ、とか。

○技shop ○○さんは、フラッシュは使用していませんね。
Jsによる画像置換を使用しています。

右上部分はCSSの背景画像置換
その他の点滅部分もjsによって構成されているようです。
後、もちろんメニューなんかもCSSの記述にて置換しています。

ブログサイトなどで、フラッシュを全面ページに使用することは
何かと、問題が多いのでほとんど使用されることはありませんね。

今回なぜ自分のホームページにてフラッシュを使用したかと
言いますと、なんとな~く大手企業の(ソ○ー)なんかでもおなじみでフラッシュメニューなどの置換がやっぱりかっこいいな~、
と思ったので使用させていただきました。

現在、フラッシュ記述内のメニューは未完成ですね
(一気にやると大変な物で^^;)

一応800×600で、専用のスタイルシートを作りましたので、
800×600で回覧に問題が出ることはないと思います。


>思い切って画像を縮小するのも良いと思いますがw

そうですね、自分もそれは考えているのですが・・・
今度は大きいディスプレイの解像度の人に不具合が出可能性が
あるんですよね。(文字サイズが小さいとか)

でも今の、デザインでは正直ヘッダーが間延びしてるかな~間が
どうしても残ってしまう状況にあります。

少し、画像を加工して左下の山の背景が残るように
加工してみるのもいいかもしれませんね。

それにしても、デザインは本当に難しい物です、
こればかりは本当に答えがありませんから・・・

jsライブラリを適用されたようで、
読み込みが遅くなってるのかと思いましたが、
意外とそうでもないみたいですね。いいと思います。

ヘッダー部分に関しては、あまり幅を縮めてしまうと、
今度はブログっぽくなってしまいそうですね。
自分は、今の状態がホームページの味が出ていて好きですね。

あと、全体のイメージをオレンジで統一されたようですが、
自分は最初の青っぽい感じのほうがいいかな。。。
まあ、こればかりは十人十色の意見があるので、
暗黒の鬼神さんが一番納得する形で妥協するしか方法はないですけどね^^;
この辺りがデザインの難しいところです。。。

にしても、フラッシュを本当に上手に使われていますね^^
でも、CPU負荷が大幅に上がってしまうという欠点があるので、
これをブログで使うのは難しいかな^^;

JavaScriptですか~。確かに○技shop ○○さんは、
JavaScriptを上手に使われていますよね。
乱数を発生させて、ランダムにCSSファイルを外部から読み込んでいるようですね。単純ですが、良い方法です。

ただ、コレはJavaScriptを無効にしていると、レイアウトが整わないという
欠点が存在しますね・・・。まぁ。JavaScriptを無効にしている人なんて
1000人に1人くらいの割合だとは思いますが・・・。

それから、自分はJavaScriptはどうしても必要な場合以外は、
極力使用を避けていますね。。。使いすぎると読み込みも遅くなりますから、
自分はできるだけ使いたくはないですね~。

、、、と、まぁ、話がそれてしまいましたが、デザインに関しては、
暗黒の鬼神さんのおっしゃるように、本当に答えがない物ですから、
シェアの高いブラウザや解像度など、最低限の対策だけして、
暗黒の鬼神さんの納得のいく範囲でマイペースにやっていくのが
一番いいのではないかな~と、思いますね^^

ん~

>アンタレスさん

ええ、本当にjsスクリプトでの表示で遅くなるかな~?
と思っていたのですが、ほとんどかわりませんね。

>ヘッダー部分に関しては、あまり幅を縮めてしまうと、
今度はブログっぽくなってしまいそうですね。

ええ、一応ホームページなもので、
ブログっぽくなってしまうと今度はなれない人もでてくると思うので
なかなか、難しいものですよ。

>あと、全体のイメージをオレンジで統一されたようですが、
自分は最初の青っぽい感じのほうがいいかな。。。

気に入っていただけたようで、幸いです^^

一応、イメージカラーはオレンジということなのですが、
いろいろ自分の中で葛藤がありオレンジということに
させていただきました。
ここらへんは、自分が気に入ったから、ですかね。

JAVAは乱立させてしまうと、恐ろしいほど遅くなってしまうので、
使用には結構気を遣います。^^;

>暗黒の鬼神さんの納得のいく範囲でマイペースにやっていくのが一番いいのではないかな~と、思いますね^^

アドバイスありがとうございます^^
自分としてはマイペースにきっちりと納得のいく物に仕上げて
いきたいので、そのような応援はとても励みになります。

それでは、アンタレスさん
ありがとうございました^^

No title

すごく素晴らしいサイトですね。
フラッシュの使い方もすごくうまいですし,画像の使い方もすごくうまいです。

一応俺もHPはありますが,プログラミング関係ではありませんし,
だからと言って日記でもありません。
見せるのは今度見せれたら見せます。

後,意見ですが俺もやはりタイトル画像がでかすぎるかな?と
思います。俺個人の意見なのであまり気にしないでください。

今日はこの辺にしときます。
では・・・

ふむふむ・・・

>EDFさん

コメントありがとうございます

>フラッシュの使い方もすごくうまいですし,画像の使い方もすごくうまいです。

そういわれると、自分も苦労して、
作ったかいがありますね。


>一応俺もHPはありますが,プログラミング関係ではありませんし,
だからと言って日記でもありません。
見せるのは今度見せれたら見せます。

おー、楽しみにさせていただきますよ
機会が会ったら、是非、見せてくださいね^^


>後,意見ですが俺もやはりタイトル画像がでかすぎるかな?と
思います。俺個人の意見なのであまり気にしないでください。

うーん、いろんな人からこれはいわれますね~^^;
基本的には、魅せるという感じのHPなため、
どちらかというとデザインを重視させたような感じですね。

標準の解像度で見ると、大きいかもしれませんが
近代で増えている、高い解像度の人から見ると、
これすら、小さく見えたりする場合すらあるので
未来の需要にあわせてみた、という感じですね。

機会がありましたらEDFさんのおっしゃた、
タイトル画像の大きさについても検討させていただきます。

ですが、自分自身がこれが気に入ってしまったもので^^;

それでは、EDFさんご指摘ありがとうございました。
コメントの投稿
管理者にだけ表示を許可する

トラックバックURL